详解HTML5中的拖放恶性事件(Drag 和 drop)

日期:2021-02-24 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

访问器适用

Internet Explorer 9、Firefox、Opera 12、Chrome 和 Safari 5 适用拖放。

注解:在 Safari 5.1.2 中不适用拖放。

HTML5 拖放案例

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script type="text/javascript"> 
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)); 
} 
</script> 
</head> 
<body> 
 
<p>请把 Aseoe logo的照片拖放到矩形框中:p> 
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div> 
<br /> 
<img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" 
draggable="true" ondragstart="drag(event)" /> 
 
</body> 
</html> 

设定元素为可拖放

最先,以便使元素可拖拽,把 draggable 特性设定为 true :

拖拽甚么 - ondragstart 和 setData()

随后,要求当元素被拖拽时,会产生甚么。

在上面的事例中,ondragstart 特性启用了1个涵数,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

当置放被拖数据信息时,会产生 drop 恶性事件。

在上面的事例中,ondrop 特性启用了1个涵数,drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

编码解释:

启用 preventDefault() 来防止访问器对数据信息的默认设置解决(drop 恶性事件的默认设置个人行为是以连接方式开启)

根据 dataTransfer.getData("Text") 方式得到被拖的数据信息。该方式将回到在 setData() 方式中设定为同样种类的任何数据信息。

被拖数据信息是被拖元素的 id ("drag1")

把被拖元素追加到置放元素(总体目标元素)中

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对各位学习培训或应用HTML5能有一定的协助,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。

上一篇:应用HTML5里的classList实际操作CSS类 返回下一篇:没有了