拖放的概念

拖放的概念"/>

拖放的概念

拖放的概念

拖放的概念：拖放（Drag 和 drop）是 HTML5 标准的组成部分，是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖拽页面中的指定元素到另一个元素中。

拖放过程：首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果源对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。

源对象：表示被拖动的元素。为元素添加 draggable 属性可以设置此元素为源对象。

目标对象：源对象进入的元素称作目标对象，目标对象可以是页面中的任一元素。

拖拽事件

HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events。

一个典型的拖拽操作是这样的：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如 drag 和 dragover 事件类型）。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

在上面示例中，ondragstart 属性调用了一个函数 drag(ev)，它规定了被拖动的数据。

DataTransfer 对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的 dataTransfer 属性。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev) {
    ev.dataTransfer.setData("text/plain", ev.target.id);
}

text/plain 是一个 DOMString，表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id：logo。

拖放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

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

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数 drop(event)：

function drop(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text/plain");
    ev.target.appendChild(document.getElementById(id));
}