• 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>
  • 相关阅读:
    多线程05.thread不知道的知识
    多线程04.策略模式
    多线程03.实现Runnable接口
    多线程02.继承Thread类
    多线程01.newThread的方式创建线程
    静态代理与动态代理
    从零开始学Kotlin第七课
    项目需求变更维护难.....
    加密算法入门
    将重复的数据合并成一行-反射
  • 原文地址:https://www.cnblogs.com/shidawang/p/15096968.html
Copyright © 2020-2023  润新知