HTML5笔记（一）——鼠标跟随与元素拖放

鼠标位置跟随

元素拖放（Drag 和 Drop）

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1、设置元素为可拖放，将其 draggable 属性设置为 true。

2、开始拖动元素— ondragstart。

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
    console.log("拖拽开始");
}

• 当开始拖动元素时， ondragstart属性调用drag(event)函数，规定了被拖动的数据。
• 其中dataTransfer.setData()方法设置被拖数据的数据类型"Text"和值ev.target.id。
• 注意：拖放之后Firefox会对setData()里设置的值进行搜索。

3、规定放置区域 — ondragover。

function allowDrop(ev)
{
    ev.preventDefault();
}

• 目标元素div的ondragover 属性规定在何处放置被拖动的元素。
• 默认地，无法将数据/元素放置到其他元素中。
• 所以想要设置允许放置，我们必须在 ondragover 事件里调用event.preventDefault() 方法阻止对元素的默认处理方式。

4、放置元素 — ondrop。

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

• 在上一步中，当放置被拖元素时ondrop 属性调用了drop(event)函数。
• 同事还要调用 preventDefault()来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）。
• 通过 dataTransfer.getData("Text")方法获得被拖的数据。该方法将返回在 dataTransfer.setData() 方法中设置为相同类型的任何数据 id ("theImg")。
• 把被拖元素追加到目标元素中。

5、 示例Demo
还有一些具体拖放事件，下面是完整Demo代码。