HTML5拖放

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)