JS实现拖拽效果

原创

A吴迪网络工作室 2022-03-21 15:06:57 ©著作权

文章标签 JS实现拖拽效果如何让元素可拖拽实现元素与图片可拖拽 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者A吴迪网络工作室的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现拖拽效果的实现思路以及演示代码：

实现思路：

在CSS中设置你要进行拖拽的图片或者元素的样式
在JS中获取元素，以及他的宽高和浏览器的宽高
在要被拖拽的元素上绑定鼠标按下事件
阻止浏览器默认行为
获取光标在元素按下时的坐标
绑定元素移动事件
获取光标在可视窗口的坐标
计算拖动的图片定位位置
判断是否在窗口范围内
设置拖动过程中图片的定位
绑定鼠标弹起事件

演示代码：

如果你对JS如果绑定事件还不是很了解的情况下建议先看而后在来看这篇文章。

要被拖拽的元素或者图片.onmousedown = function() {
  //获取光标在事件源元素坐标系中的坐标
  /* 。。。获取坐标的代码。。。 */
  document.onmousemove = function() {
    /* 。。。获取光标在可见视口中的坐标。。。 */
    //而后利用光标在可视窗口的坐标减去光标在拖动的事件源元素坐标系中的坐标，计算出拖动元素的定位位置。
    //而后设置CSS样式中的定位
  }
  document.onmouseup = function() {
    取消mousemove事件的绑定
  }
}

实现让图片在浏览器可视窗口内移动：

html,css,js完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #box {
      width: 200px;
      height: 200px;
      background: orange;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <!-- 可以替换成图片 -->
  <div id="box"></div>
  
  <script>
    //待拖拽的元素
    let _img = document.getElementById('box');
    //获取元素与浏览器的宽高
    let winWidth = window.innerWidth,
      winHeight = window.innerHeight,
      imgWidth = _img.offsetWidth,
      imgHeight = _img.offsetHeight;
    //在待拖拽的元素上绑定鼠标按下事件
    _img.onmousedown = function(event) {
      //兼容IE
      event = event || window.event;
      //阻止浏览器默认行为兼容IE的写法
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
      //记录光标在图片按下时的坐标
      let _offsetX = event.offsetX,
        _offsetY = event.offsetY;
      //绑定鼠标移动事件
      document.onmousemove = function(event) {
        //获取光标在可视窗口中的坐标
        let _x = event.clientX,
          _y = event.clientY;
        //计算拖动的图片的定位的位置
        let _left = _x - _offsetX,
          _top = _y - _offsetY;
        //判断是否在窗口范围内
        if (_top < 0) { //上
          _top = 0;
        } else if (_top >= winHeight - imgHeight) { //下
          _top = winHeight - imgHeight;
        }
        if (_left < 0) {  //左
          _left = 0;
        } else if (_left >= winWidth - imgWidth) {    //右
          _left = winWidth - imgWidth;
        }
        //设置拖动过程中图片的定位
        _img.style.top = _top + 'px';
        _img.style.left = _left + 'px';
      }
      //绑定鼠标弹起事件
      document.onmouseup = function() {
        document.onmousemove = null;
      }
    }
  </script>
</body>
</html>