js 实现拖拽元素

JavaScript013

js 实现拖拽元素,第1张

因为需要计算元素的位置变化，所以需要掌握几个关于位置的api

点击需要拖动元素时，获取该元素的初始位置。

鼠标移动期间 获取元素当前的位置信息

计算

进行事件监听

拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；

问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，

解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。

拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）

处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。

正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。

在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。

1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了

2.拖动事件:

开始拖动时dragstart

进行拖动时drag

结束拖动时dragend

3.拖拽区域触发事件:

拖拽元素进入区域时触发dragenter

拖拽元素进入区域后悬停触发dragover

拖拽元素离开区域时触发dragleave

拖拽元素放置时触发drop

js实现一个拖拽事件的方法：

1、定义HTML

<div id="no-drop" class="draggable drag-drop">#无拖动 </div>

<div id="yes-drop" class="draggable drag-drop">#有拖动 </div>

<div id="outer-dropzone" class="dropzone">

#外层拖动

<div id="inner-dropzone" class="dropzone">#内层拖动</div>

</div>

2、定义css

/* 外层样式定义 */

#outer-dropzone {

height: 140px

}

#inner-dropzone {

height: 80px

}

.dropzone {

background-color: #ccc

border: dashed 4px transparent

border-radius: 4px

margin: 10px auto 30px

padding: 10px

width: 80%

transition: background-color 0.3s

}

.drop-active {

border-color: #aaa

}

.drop-target {

background-color: #29e

border-color: #fff

border-style: solid

}