h5新增了一个draggable属性,这个属性在所有标签上都可以使用,当然这个属性仅仅是决定了决定这个元素是否可以拖拽,
要想实现元素的拖拽功能,还得依靠 3个事件:
1.dragstart事件:该事件在拖拽动作开始时调用,我们一般会在这个事件的回调函数里把要拖拽的对象用event.dataTransfer.setData进行设置,这个函数有两个参数,第一个时数据的类型,一个是数据的值,其实我觉得这两个参数的含义不重要,重要的是为什么要这样设置,这有点像,我们再map里存数据一样,要给数据起个名字,把数据和标签一一对应,在拿的时候靠标签名拿,就?了,这个函数有个要注意的点就是,当第一个参数相同时,后面的值会覆盖前面的值
2,dragover: 我们要拖拽一个元素,绝大部分是要给被拖拽的元素一个家的,那么这个事件,就是注册在这个家身上的,首先对于所有的元素来说,是无法将数据/元素加到其它的元素之中的,所以在这个事件的回调函数中,我们要阻止这个默认事件
3.ondrop: 这个事件是在进行放置的时候触发的
下面是个例子,来自w3school,我把认为不需要的语句进行了删除:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Test","ye");
console.log(ev.dataTransfer);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Test");
console.log(data);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="ye" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>