HTML拖拽

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));
}