HTML拖放

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

   draggable = ‘true’

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

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

FunctionDrag（ev）{

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

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

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

}

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

   Ondragover = allowDrag（event）

   Function allowDrag(ev){

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

   Ev.preventDefault();

   }

2. 当放置（松开鼠标）被拖动数据时，会发生的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属性即可

ondrop="drop(event)"ondragover="allowDrop(event)"