拖放功能
<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" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="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获取拖动的元素
<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" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="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都是容器，都支持拖放
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
