拖放事件
坑军之王
206
拖放事件是在拖放源和拖放目标之间传输数据的用户界面，它可以存在相同应用或是不同应用之间。
在mousedown事件中，会调用drag（）函数，其函数有两个参数：
第一个是要拖动的元素，它可以是发生mousedown事件的元素或包含元素（如可能允许用户拖动的元素看起来像标题栏，而拖动的包含元素像窗口）无论是什么情况，它必须是使用CSS设定了position属性绝对定位的文档元素。
第二个参数的触发mousedown事件的事件对象，下面来一个例子，进行事件的拖放，用到的属性见表格：
|
属性 |
描述 |
返回值 |
|
ondrag |
script |
当拖动元素时运行脚本 |
|
ondragend |
script |
当拖动操作结束时运行脚本 |
|
ondragenter |
script |
当元素被拖动至有效的拖放目标时运行脚本 |
|
ondragleave |
script |
当元素离开有效拖放目标时运行脚本 |
|
ondragover |
script |
当元素被拖动至有效拖放目标上方时运行脚本 |
|
ondragstart |
script |
当拖动操作开始时运行脚本 |
|
ondrop |
script |
当被拖动元素正在被拖放时运行脚本 |
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));
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>