html 拖拽效果,HTML5拖拽效果

拖放

拖放是一个非常常见的功能。用在当你“抓取”一个对象并拖动它到另一个位置时.

HTML5里, 拖放是标准的一部分：任何元素都可以拖动.

浏览器支持

表中的数字指定第一个完全支持拖放的浏览器版本.

API

Drag and Drop

4.0

9.0

3.5

6.0

12.0

HTML拖放示例

下面的例子是一个简单的拖放例子:

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

οndragstart="drag(event)" width="336" height="69">

这可能看起来很复杂，但让我们通过拖放事件的所有不同部分.

让一个元素可以拖动

首先：做一个元素拖动，拖动属性设置为真:

拖什么 - ondragstart 和 setData()

然后，指定元素拖动时应该发生什么.

在上面的实例中, ondragstart 属性调用一个函数, drag(event), 指定要拖动的数据.

dataTransfer.setData() 方法设置拖动数据的数据类型和值:

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

在这种情况下, 数据类型是 "text"并且拖动元素的id值是drag1.

拖到哪儿 - ondragover

ondragover 事件指定拖动数据可以被丢弃的位置.

默认情况下，数据/元素不能在其他元素中删除。要允许拖动，我们必须防止元素的默认处理.

在ondragover事件方法中调用event.preventDefault():

event.preventDefault()

拖动 - ondrop

当拖动的数据被拖动时,拖动事件发生.

在上面的实例中, ondrop 属性调用函数, drop(event):

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

代码解析:

调用preventDefault() 为了防止浏览器默认处理数据(默认是作为链接打开)

使用dataTransfer.getData()方法获得拖动数据. 此方法将返回数据和setData方法相同

拖放数据元素的id是drag1

将拖动的元素添加到拖动元素中