HTML5新增的拖放API
程序员文章站
2022-03-10 19:53:38
...
HTML新增了的关于拖放的API，通过拖放API可以让HTML页面中的任何元素都变成可以拖动的，通过拖放机制可以开发出更加友好的人机交互界面。
拖放操作分为两个动作：拖和放。
启动拖动
在HTML中，<img…/>元素默认时可以拖动的；而<a…/>元素只要设置了href属性，则也默认为可以拖动。
如下代码：
对于普通元素而言，只要将该元素的draggable属性改为true，便可变成拖动。但这仅仅表示该元素是可以拖动的，想要看到拖动效果，就必须使其携带数据，因此除了将该元素的draggable改为true，还需为该元素的ondragstart设置监听器。
如下图代码：
接受放
显然，不管是拖动图片还是拖动<div…/>元素，拖动时都会显示一个“禁止显示”；这表明这些元素被拖动到的目的地并不接受被拖动元素，即被拖动元素被“拖过”document对象时，document对象阻止了默认的拖动事件。而其他HTML组件也时位于document对象内的，因此它们也不能接受“放”。
为了让document接受“放”，需要为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。
如下代码：
然而，不同浏览器对拖放操作的默认动作并不相同。如果开发者想要取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。
即增加如下代码：
因此，想要实现一个允许*拖动的<div…/>元素，只需要监听document的ondrop方法，当用户把<div…/>元素“放”到document中时，通过JavaScript代码将该元素移动到该位置即可。
- 下面附上代码：实现一个可以*拖动的<div…/>元素
-<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>可拖拽</title>
</head>
<body>
<div id="source" style="width:80px;height;80px;
border:1px solid black;
background-color:#bbb;"
draggable="true">啦啦啦啦</div>
<script type="text/javascript">
var source=document.getElementById("source");
source.ondragstart=function(evt)
{
//让拖动操作携带数据
evt.dataTransfer.setData("text","疯狂牙医");
}
document.ondragover=function(evt)
{
//取消时间的默认行为
return false;
}
document.ondrop=function(evt)
{
source.style.position="absolute";
source.style.left=evt.pageX+"px";
source.style.top=evt.pageY+"px";
//取消事件的默认行为；
return false;
}
</script>
</body>
</html>