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 {
              const touchData = touches.length ? touches : changedTouches;
              const [{
                pageX,
                pageY }] =
              touchData;
              posX = pageX;
              posY = pageY;
            }
            return {
              x: posX,
              y: posY };
        
          },
          start(ev) {
            touchObj.$parent = $('.parent');
            touchObj.$target = $('.child');
            const {
              target } =
            ev;
        
            if (touchObj.$target[0] !== target) {
              return;
            }
        
            let {
              getPos } =
            touchObj;
            const {
              x,
              y } =
            getPos(ev);
        
            touchObj.startX = x;
            touchObj.startY = y;
        
            touchObj.istouchStart = true;
          },
          move(ev) {
            if (!touchObj.istouchStart) {
              return;
            }
        
            let {
              $parent,
              $target,
              boundary,
              getPos } =
           .........完整代码请登录后点击上方下载按钮下载查看