1.概念
拖拽操作在HTML5 是作为标准的一部分。能够使用HTML5所支持的事件和属性来实现拖拽操作
2.拖拽相关事件及属性
dragstart
:是个事件。该事件在刚开始拖拽时在拖拽元素上触发。一般会用来设置数据。dragover
:是在拖拽时不断触发的事件,一般会给放置元素设置取消默认的不可放置行为。即表示某个元素可以放置在另一个元素之前或之后。drop
:是放置事件。放置元素进行触发。一般我们会在事件里获取dragstart
事件里设置的数据,并进行拖拽的dom处理。draggable
:HTML标签属性。设置某个HTML标签是否可拖拽,默认是不可拖拽的-false,布尔型。dataTransfer
:是拖拽相关事件的event对象才有的一个对象属性。可以利用它来实现拖拽的数据传输。一般我们会将拖拽元素的id或class保存到dataTransfer
中,在drop
事件中获取该数据并进行处理setData(‘属性名’,'属性值')
:以键值对方式保存某个数据getData(‘属性名’)
:获取某个数据
3.拖拽一般流程
1.给需要拖拽 的标签设置draggable=true
<img src="./images/img16.jpg" draggable="true" id="pic" width="200px">
2.给拖拽的标签设置ondragstart
事件,事件里利用dataTransfer
保存拖拽元素的class或id
//获取元素
var picEle=document.querySelector("#pic");
//2.给要拖拽的元素设置ondragstart事件
picEle.ondragstart=function(e){
var ev=e||window.event;
ev.dataTransfer.setData('text',ev.target.id);
}
3.给放置元素设置dragover
事件,事件里取消默认行为,保证该标签可以放置拖拽元素
//获取box元素
var boxEle=document.querySelector(".box");
boxEle.ondragover=function(e){
var ev=e||window.event;
ev.preventDefault();
}
4.给放置元素设置ondrop
事件,事件里利用dataTransfer
来获取所保存的数据,并进行业务处理。
boxEle.ondrop=function(e){
var ev=e||window.event;
var data=ev.dataTransfer.getData('text');
e.target.appendChild(document.querySelector("#"+data));
}