介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>拖放& lt;/title>
& lt;风格类型=拔谋?css"比;
p1 #{宽度:360 px;高度:220 px;填充:20 px;边界:1 px固体黑色;}
& lt;/style>
& lt; script>
函数allowDrop (ev) {
ev.preventDefault ();
}
函数阻力(ev) {
ev.dataTransfer.setData (“Text" ev.target.id);
}
功能下降(ev) {
ev.preventDefault ();
var data=https://www.yisu.com/zixun/ev.dataTransfer.getData(“文本”);
ev.target.appendChild (. getelementbyid(数据));
}>
功能下降(ev)
｛
ev.preventDefault ();
var data=https://www.yisu.com/zixun/ev.dataTransfer.getData(“文本”);
ev.target.appendChild (. getelementbyid(数据));
} & lt; body>
& lt; p id=皃1"> & lt;风格类型=拔谋?css"比;
# p1 # p2{宽度:360 px;高度:220 px;填充:20 px;边界:1 px固体黑色;}
& lt;/style>
这篇文章主要介绍用H5实现拖放效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<>强拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在HTML5中,拖放是标准的一部分,任何元素都能够拖放。
Internet Explorer 9 +, Firefox、Opera, Chrome和Safari支持拖动。
<强> Safari 5.1.2不支持拖动。
实例:
函数阻力(ev) ｛ ev.dataTransfer.setData (“Text" ev.target.id); }
在这个例子中,数据类型是“Text",值是可拖动元素的id (“drag1")。
规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用<强> 强的:
当放置被拖数据时,会发生滴事件。
在上面的例子中,ondrop属性调用了一个函数,<强>
代码解释:
调用<强> 来避免浏览器对数据的默认处理(滴事件的默认行为是以链接形式打开)
通过<强> 获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。
被拖数据是被拖元素的id (“drag1")
把被拖元素追加到放置元素(目标元素)中
<强>来回拖动:
若要在两个地方来回拖动,只需将上面代码稍作修改就行了。
将身体中的代码改成:
这样就可以实现来回拖放了。
以上是用H5实现拖放效果的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
