HTML5拖放效果的实现代码

2020-04-21 22:58:54易采站长站整理
获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中

来回拖动:

若要在两个地方来回拖动,只需将上面代码稍作修改就行了.
将body中的代码改成:

<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>

然后在style样式中加上#div2就可以了:

<style type="text/css">
#div1,#div2{width:360px;height:220px;padding:20px;border:1px solid black;}
</style>

这样就可以实现来回拖放了。