HTML5拖放
1.被拖动元素设置为可被拖放
draggable = ‘true’
<div class="drag" id="drap1" draggable="true" ondragstart="drag(event)">drag</div>
2.规定当被拖元素被拖动时会发生的事件
ondragstart = drag(event){ }//执行这个函数
//拖动什么
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
//数据类型是 "Text",值是可拖动元素的 id ("drag1")
}
event.dataTransfer.setData(‘Text’,event.target.id);把目标元素的id存放到‘Text’里面。
3.设置另一个元素可接受被拖动数据
ondragover = allowDrop(event){ }//执行这个函数
获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
//放到何处
function allowDrop(event){
event.preventDefault();//消除默认(元素不可以接受另一个元素)属性
}
消除系统对元素的默认(不允许接收另一个元素)属性
4.当松开鼠标时会发生的事件
//进行放置
function drop(event){
event.preventDefault();//消除默认(浏览器对被拖元素以链接的方式打开)属性
var data = event.dataTransfer.getData("Text");//得到被拖元素的id
event.target.appendChild(document.getElementById(data));
// event.target.removeChild(document.getElementById(data));
}
5.实现来回拖动就是把放置目标(被拖动元素)的元素属性设置为可接收元素
在放置目标的元素内加上ondrop属性和ondragover属性即可
event.preventDefault();消除浏览器的默认属性
ondrop="drop(event)" ondragover="allowDrop(event)