方法/步骤
-
1
DataTransfer对象：退拽传递的对象，一般使用Event.dataTransfer。
-
2
draggable属性，标签元素设置值为true。drangable=true。
-
3
ondragstart事件:元素被拖拽的时候触发的事件，作用在被拖拽元素上。
-
ondragenter事件:进入目标元素触发事件，作用在目标元素上。
-
ondragover事件:拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上。
-
ondrop事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上。
-
ondragend事件:拖拽完成后触发事件，作用在被拖拽元素上。
-
Event.preventDefault()方法:阻止默认方法执行。ondragover中一定要执行preventDefault(),否则ondrop事件不会被 触发。
-
Event.effectAllowed属性:拖拽的效果。
-
设置元素为可拖放，draggable属性设置为true。
-
拖动元素 使用ondragstart事件。setData()设置获取元素。
dataTransfer.setData()方法设置被拖数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
drag(event)声明方法，规定被拖动的数据，类型是"text",值是可拖动元素id获取。
-
拖拽放入目标 ondragover，ondragover事件规定在何处放置被拖拽的数据。
一定要定义event.preventDefault(),来阻止默认动作。
-
进行放置 ondrop 当放置被拖数据时，会发生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementByIdx_x(data));
}