JS 拖拽

最新推荐文章于 2024-09-03 09:43:43 发布

jialiang_l

最新推荐文章于 2024-09-03 09:43:43 发布

阅读量462

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ljl0433/article/details/112300349

版权

本文介绍了通过JavaScript的mousedown、mousemove、mouseup事件以及HTML5的Drag和Drop特性实现元素拖拽的方法。在JavaScript实现中，重点在于元素需绝对定位，通过改变元素坐标跟随鼠标移动。在HTML5中，只需添加draggable属性即可使元素可拖动，并有相应的拖拽事件可监听。同时提到了SetCapture()和ReleaseCapture()的用法。

摘要由CSDN通过智能技术生成

一、通过 mousedown、mousemove、mouseup 方法实现
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。
（1）onmousedown：鼠标按下事件
（2）onmousemove：鼠标移动事件
（3）onmouseup：鼠标抬起事件

重点：
（1）一定要绝对定位，脱离文档流才可以移动。
（2）绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。
（3）点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。
移动：通过 a - c 建立鼠标与div的关系，防止鼠标超出div。

基本思路：
拖拽状态 = 0鼠标在元素上按下的时候 {
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}

鼠标在元素上移动的时候 {
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}

鼠标在任何时候放开的时候 {
拖拽状态 = 0
}

代码：
move：此光标指示某对象可被移动。

.box {
   
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      cursor: move;
    }

 <div class="box" id="drag"></div>

  <script>
    window.onload = function () {
   
    	var drag = document.getElementById('drag');
    	// 点击某物体时，用drag对象即可，move和up是全局区域，
    	// 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)  
    	drag.onmousedown = function (event) {
   
    	var event = event || window.event; //兼容IE浏览器
    	// 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
    	var diffX = event.clientX - drag.offsetLeft;
    	var diffY = event.clientY - drag.offsetTop;
    	if (typeof drag.setCapture !==