HTML5-拖放

1被拖元素设置为可被拖动

draggable = ‘true’

 

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

Ondragstart = drad(event);//执行这个函数

Function Drag（ev）{

//设置被拖动元素的数据类型和值（值是被拖动元素的id）

//把被拖目标元素的id存到text里面。

Ev.dataTransfer.setData(“Text”,ev.target.id);

}

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

Event.preventDeault

function allowDrop(event){
    event.preventDefault();//消除默认（浏览器被拖元素以链接的方式打开）属性
}

消除系统对元素的默认（不允许接受另一个元素）属性

4.当松开鼠标是会发生的事件

function drop(event){
    event.preventDefault();//消除默认（元素不可以接受另一个元素）属性
    var d =event.dataTransfer.getData("Text");//得到被拖元素的id
    event.target.appendChild(document.getElementById(d));
}

1.被拖动元素的属性设置为可拖放

draggable = ‘true’

2.规定元素被开始拖动时，会发生什么

Ondragstart = drad(event);//执行这个函数

Function Drag（ev）{

//设置被拖动元素的数据类型和值（值是被拖动元素的id）

//把被拖目标元素的id存到text里面。

Ev.dataTransfer.setData(“Text”,ev.target.id);

}

3.设置元素为可接收被拖动的数据

Ondragover = allowDrag（event）

Function allowDrag(ev){

//阻止默认（不允许把数据拖放到其他元素中）对数据的处理方式

   Ev.preventDefault();

}

4.当放置（松开鼠标）被拖动数据时，会发生的drop事件

ondrop = drop(event);

function drop(ev){

//调用preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

Ev.preventDefault();

获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据

Var data = ev.dataTansfer.get(“Text”);

   Ev.target.appenChild(document.getelementbyid(data));

/*ev.target.removeChild(document.getElementById(data))*/

}

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

在放置目标的元素内加上ondrop属性和ondragover属性即可