html5怎么设置drop,html5拖(drag)放(drop)功能

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

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

}

function drop(ev)

{

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

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

}

请把 W3School 的图片拖放到矩形中：

设置元素可拖动

一个img想放到div中，首先设置img可以被拖动  draggable=“true”

拖动什么   ondeagstart 、setData

元素拖动的时候会发生什么，drag(ev)这方法规定了被拖动的数据，ev.dataTransfer.setData(“Text”,ev.target.id) 设置被拖动数据的数据类型和值   例如Text是数据类型，id(“drag1”)是值

拖放到何处  -ondragover

ondragover设置在何处放置数据，默认是无法将数据放到其他元素中，所以需要重新设置，调用

event.preventDefault();

进行放置 - ondrop

当放置数据时，发生drop事件，调用一个drop函数

ev.preventDefault()设置浏览器对数据的处理方式，默认是以连接的形式打开的，但是去掉这一行也可以实现拖放

var data = ev.dataTransfrt.getData("Text");    获取被拖放的数据

被拖的数据元素是id(“drag1”)

ev.target.appendChiled(document.getElementById(data))把获取到的数据加到指定的div中;

元素在两个div之间来回拖动，原理类似

#div1,#div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

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

}

function drop(ev)

{

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

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

}