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>
7923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
