• js实现限定范围拖拽,同时可通过键盘方向键控制移动


    Talk is cheap. Show me the code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>拖拽</title>
        <style>
          * {
            padding: 0;
            margin: 0;
          }
          #father {
             500px;
            height: 500px;
            position: relative;
            left: 100px;
            top: 100px;
            border: 2px solid red;
          }
          #box1 {
             100px;
            height: 100px;
            background: #ccc;
            position: absolute;
            cursor: move;
            left: 0;
            top: 0;
          }
          #box2 {
             100px;
            height: 100px;
            background: #ccc;
            position: absolute;
            cursor: move;
            right: 0;
            top: 0;
          }
        </style>
      </head>
      <body>
        <div id="father" onclick="onClickFather(event)">
          <div id="box1" onmousedown="down('box1',event)">拖拽块1</div>
          <div id="box2" onmousedown="down('box2',event)">拖拽块2</div>
        </div>
        <script>
          // 鼠标控制移动
          var dragging = false //控制移动状态
          var boxX, boxY, mouseX, mouseY, offsetX, offsetY
          var father = document.getElementById('father')
          // 键盘方向键控制移动
          var topNum = 0
          var leftNum = 0
          var allowWidth = 0
          var allowHeight = 0

          function onClickFather(e) {
            if (e.target === father) {
              document.removeEventListener('keydown', keyDown)
            }
          }

          // 鼠标的移动动作
          document.onmousemove = move
          // 释放鼠标的动作
          document.onmouseup = up

          // 鼠标按下后的函数,e为事件对象
          function down(name, e) {
            box = document.getElementById(name)
            allowWidth = father.clientWidth - box.offsetWidth
            allowHeight = father.clientHeight - box.offsetHeight
            document.addEventListener('keydown', keyDown)

            dragging = true
            // 获取元素所在的坐标
            boxX = box.offsetLeft
            boxY = box.offsetTop

            // 获取鼠标所在的坐标
            mouseX = parseInt(getMouseXY(e).x)
            mouseY = parseInt(getMouseXY(e).y)

            // 鼠标相对元素左和上边缘的坐标
            offsetX = mouseX - boxX
            offsetY = mouseY - boxY
          }

          // 鼠标移动调用的函数
          function move(e) {
            if (dragging) {
              // 获取移动后的元素的坐标
              var x = getMouseXY(e).x - offsetX
              var y = getMouseXY(e).y - offsetY
              // 可移动位置的改变
              // 计算可移动位置的大小, 保证元素不会超过可移动范围
              // 此处就是父元素的宽度减去子元素宽度
              var width = father.clientWidth - box.offsetWidth
              var height = father.clientHeight - box.offsetHeight

              // min方法保证不会超过右边界,max保证不会超过左边界
              x = Math.min(Math.max(0, x), width)
              y = Math.min(Math.max(0, y), height)

              // 给元素及时定位
              box.style.left = x + 'px'
              box.style.top = y + 'px'

              // 使得键盘方向键也可控制移动
              leftNum = x
              topNum = y
            }
          }

          // 释放鼠标的函数
          function up(e) {
            dragging = false
          }

          // 函数用于获取鼠标的位置
          function getMouseXY(e) {
            var x = 0,
              y = 0
            e = e || window.event //兼容IE

            if (e.pageX) {
              x = e.pageX
              y = e.pageY
            } else {
              x = e.clientX + document.body.scrollLeft - document.body.clientLeft
              y = e.clientY + document.body.scrollTop - document.body.clientTop
            }
            return {
              x,
              y,
            }
          }

          function keyDown(e) {
            e = e || window.event //兼容IE
            let code = e.keyCode
            if (code === 38) onUp()
            if (code === 40) onDown()
            if (code === 37) onLeft()
            if (code === 39) onRight()
          }
          function onUp() {
            topNum -= 1
            if (topNum <= 0) topNum = 0
            box.style.top = topNum + 'px'
          }
          function onDown() {
            topNum += 1
            if (topNum >= allowHeight) topNum = allowHeight
            box.style.top = topNum + 'px'
          }
          function onLeft() {
            leftNum -= 1
            if (leftNum <= 0) leftNum = 0
            box.style.left = leftNum + 'px'
          }
          function onRight() {
            leftNum += 1
            if (leftNum >= allowWidth) leftNum = allowWidth
            box.style.left = leftNum + 'px'
          }
        </script>
      </body>
    </html>
  • 相关阅读:
    Ubuntu12.04 下安装QQ
    python下sqlite增删查改方法(转)
    你有哪些想要分享的 PyCharm 使用技巧?
    PEP 8
    macos 下安装virtualenv,virtualenvwrapper,然后在pycharm中正常配置方法日志
    最全Python爬虫总结(转载)
    Git 常用命令详解
    Python 扩展技术总结(转)
    使用setup.py安装python包和卸载python包的方法
    IPython3 notebook 成功配置Python2和Python3内核(Kernel)
  • 原文地址:https://www.cnblogs.com/shidawang/p/15096968.html
Copyright © 2020-2023  润新知