【技术重温】html之重点（七）

来源：互联网发布：社交网络的数据挖掘编辑：程序博客网时间：2024/06/05 03:24

拖放功能

<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>

<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>

步骤
1.把元素drag1设置为可拖放，draggable 属性设置为 true；
2.设置传递参数，此处将要拖放的元素drag1 id 传递给将要放置的容器中，ondragstart事件触发
ev.target指的是要拖动的目标元素
ev.dataTransfer代表传递的参数，传递的参数都是一些键值对，可以通过setData/getData函数对来实现参数的设置和获取。注意：可以设置或获取多个参数
3.被放置的容器设置ondragover事件，调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
4.被放置的容器设置ondrop事件，注意，此时的ev.target指的是容器，需要2步：
通过getData获取id并通过id获取拖动的元素

通过appendChild将拖动的元素加入到新容器

注意：div1和div2都是容器，都支持拖放

阅读全文

'); })();