html5拖放

标签：art   func   draggable   document   包含   数据   drag   target   fun   

拖放就是抓住一个元素，拖动到另一个位置。

拖动什么？

在拖动元素里要设置draggable为true，并设置onDraggstart触发包含evet.DataTransfer.setData("Text",evet.target.id)

<image draggable="true" onDraggStart="drag(evet)">

function drag(ev)

{

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

}

放到哪里？

元素默认不允许其它元素放置的，但可以通过preventDefault()改变默认处理方式。

放置的时候，获取transfer里设置的数据；

然后将对应元素追加到目标元素上。

<div ondrop="drop(event)" ondragOver="allowdrop(event)">

</div>

function allowdrop(ev)

{

ev.preventDefault();

}

function drop(ev)

{

ev.preventDefault();

var a=ev.dataTransfer.getData();

ev.target.appendChild(document.getElementById(a))

}

html5拖放

标签：art   func   draggable   document   包含   数据   drag   target   fun   

原文地址：https://www.cnblogs.com/Zhengxiaoxiao/p/10503537.html