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 {
        width: 500px;
        height: 500px;
        position: relative;
        left: 100px;
        top: 100px;
        border: 2px solid red;
      }
      #box1 {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: absolute;
        cursor: move;
        left: 0;
        top: 0;
      }
      #box2 {
        width: 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>

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

上一篇:Artificial Intelligence: A Modern Approach Notes


下一篇:windows下安装virtualenvwrapper