jquery实现鼠标拖动摇杆操作效果代码-html代码-BFW代码库

jquery实现鼠标拖动摇杆操作效果代码

代码语言：html

所属分类：拖放

代码描述：jquery实现鼠标拖动摇杆操作效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html,
        body,
        .circle {
                        margin: 0;
                        padding: 0;
        }
        html,
        body {
                        width: 100%;
                        height: 100%;
        }
        .circle {
                        border-radius: 50%;
                        border: 1px solid;
        }
        .parent {
                        width: 140px;
                        height: 140px;
        }
        .child {
                        width: 100px;
                        height: 100px;
        }
        .parent {
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        margin: auto;
        }
        .child {
                        position: relative;
                        width: 50px;
                        height: 50px;
                        left: 45px;
                        top: 45px;
        }
    </style>



</head>

<body>
    <div class="circle parent">
        <div class="circle child">

        </div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>


    <script>
        'use strict';
        const touchObj = {
          $parent: $('.parent'),
          $target: $('.child'),
          startX: 0,
          startY: 0,
          moveX: 0,
          moveY: 0,
          endX: 0,
          endY: 0,
          istouchStart: false,
          boundary({
            origin,
            radius })
          {
            const {
              sin,
              cos,
              atan2 } =
            Math;
            const angle = atan2(origin.y, origin.x);
            const limitX = (cos(angle) + 1) * radius;
            const limitY = (sin(angle) + 1) * radius;
        
            return {
              limitX,
              limitY };
        
          },
          getPos(ev) {
            const {
              changedTouches,
              touches } =
            ev;
            let posX;
            let posY;
            if (ev.type.indexOf('mouse') >= 0) {
              posX = ev.pageX;
              posY = ev.pageY;
            } else {
              .........完整代码请登录后点击上方下载按钮下载查看