HTML5拖放

HTML5 拖放

1．被拖元素设置为可被拖放

Darggable = “true”的时候，意为可拖拽的

<div class="drag" id="drag1" draggable="true" ondragstart="drag(event)">drag</div>

2.规定当前被拖元素被拖动时会发生的事件

Ondragstart=function  drag(event){}  //执行这个函数
function drag(event) {
    event.dataTransfer.setData("text",event.target.id);   //当一个元素被拖起来的时候 ；两个参数 1.自定义 2目标元素的id
}

event.dataTrangsfer.setData(“text”,event.target,id);把目标元素的id存放到“text”里面

3.设置另一个元素可接受被拖动数据

Event.preventDefault();
//允许被放的事件
function allowDrop(event){
    event.preventDefault(); //消除默认（元素不可以接受另一个元素）属性

清除系统对元素的默认（不允许接受另一个元素的）属性
阻止默认：程序原来设定的属性，我们不希望他们这么做，所以我们就需要阻止默认事件

4.当松开鼠标时，被拖拽元素会发生的drop事件


//可接受事件
function drop(event) {
event.preventDefault(); //消除默认（浏览器对被拖元素以连接的方式打开）属性
var data = event.dataTransfer.getData("text"); //得到被拖元素的id
event.target.appendChild(document.getElementById(data)); //接受元素
}

调用event.pereventDefault()来避免浏览器对数据的默认梳理（drop事件的默认是以链接的形式打开的）

5.实现来回拖动就是把放置目标（被拖动的元素）的元素属性设置为可接受元素

在放置目标元素内加上ondrop属性和ondragover属性即可
ondrop="drop(event)" ondragover="allowDrop(event)