Html5 简明教程

HTML - Drag and Drop API

Drag and Drop (DnD) 是一个功能强大的用户界面概念，它可以借助鼠标点击和移动轻松地复制、重新排列和删除项目。这允许用户点击并按住鼠标按钮放置在某个元素上，将其拖动到另一个位置，然后释放鼠标按钮以将元素放置在那里。

Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks and movements. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

要使用传统的 HTML4 实现拖放功能，开发人员必须使用复杂的 JavaScript 编程或其他 JavaScript 框架（如 jQuery 等）。

To achieve drag and drop functionality with traditional HTML4, developers either have to use complex JavaScript programming or other JavaScript frameworks like jQuery etc.

现在，HTML5 使用拖放 (DnD) API，为浏览器提供原生 DnD 支持，从而更容易进行编码。它受到 Chrome、Firefox 3.5 和 Safari 4 等所有主流浏览器的支持。

Now, HTML5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. It is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

Making an Element Draggable

要让元素可拖动，我们必须将 draggable 属性设置为真。例如，

To make a element draggable, we have to set draggable attribute to true. For example,

<div draggable="true">

Drag and Drop Events

在拖放操作的不同阶段会触发许多事件。下面列出了这些事件：

There are number of events which are fired during various stages of the drag and drop operation. These events are listed below

Events

Description

dragstart

Fires when the user starts dragging of the object.

dragenter

Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover

This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.

dragleave

This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.

drag

Fires every time the mouse is moved while the object is being dragged.

drag

The drop event is fired on the element where the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

dragend

Fires when the user releases the mouse button while dragging an object.

Note 只触发了拖动事件；鼠标事件如 mousemove 在拖动操作期间并未触发。

Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.

The DataTransfer Object

所有拖放事件的事件监听器方法都接受 Event 对象，它有一个只读属性，称为 dataTransfer 。

The event listener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer.

event.dataTransfer 返回与以下事件关联的 DataTransfer 对象。

The event.dataTransfer returns DataTransfer object associated with the event as follows

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

DataTransfer 对象保存有关拖放操作的数据。这些数据可以根据与 DataTransfer 对象关联的各种属性进行检索和设置，如下所示：

The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set in terms of various attributes associated with DataTransfer object as explained below

Attribute

Description

dataTransfer.dropEffect [ = value ]

Returns the kind of operation that is currently selected.This attribute can be set, to change the selected operation.The possible values are none, copy, link, and move.

dataTransfer.effectAllowed [ = value ]

Returns the kinds of operations that are to be allowed.This attribute can be set, to change the allowed operations.The possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.

dataTransfer.types

Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string "Files".

dataTransfer.clearData ( [ format ] )

Removes the data of the specified formats. Removes all data if the argument is omitted.

dataTransfer.setData(format, data)

Adds the specified data.

data = dataTransfer.getData(format)

Returns the specified data. If there is no such data, returns the empty string.

dataTransfer.files

Returns a FileList of the files being dragged, if any.

dataTransfer.setDragImage(element, x, y)

Uses the given element to update the drag feedback, replacing any previously specified feedback.

dataTransfer.addElement(element)

Adds the given element to the list of elements used to render the drag feedback.

Drag and Drop Process

以下是要执行以实现拖放操作的步骤：

Following are the steps to be carried out to implement Drag and Drop operation

Step 1 - Making an Object Draggable

以下步骤需采取：

Here are steps to be taken

If you want to drag an element, you need to set the draggable attribute to true for that element.
Set an event listener for dragstart that stores the data being dragged.
The event listener dragstart will set the allowed effects (copy, move, link, or some combination).

以下是使一个对象可拖动的示例

Following is the example to make an object draggable

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      #boxA,
      #boxB {
         float: left;
         padding: 10px;
         margin: 10px;
         -moz-user-select: none;
      }
      #boxA {
         background-color: #6633FF;
         width: 75px;
         height: 75px;
      }
      #boxB {
         background-color: #FF6699;
         width: 150px;
         height: 150px;
      }
   </style>
   <script type="text/javascript">
      function dragStart(ev) {
         ev.dataTransfer.effectAllowed = 'move';
         ev.dataTransfer.setData("Text",
                        ev.target.getAttribute('id'));
         ev.dataTransfer.setDragImage(ev.target, 0, 0);
         return true;
      }
   </script>
</head>
<body>
   <center>
      <h2>Drag and drop HTML5 demo</h2>
      <div>
         Try to drag the purple box around.
      </div>
      <div id="boxA"
           draggable="true"
           ondragstart="return dragStart(event)">
               <p>Drag Me</p>
      </div>
      <div id="boxB">Dustbin</div>
   </center>
</body>
</html>

Step 2 - Handle dropping of the Object

为了接受一个拖放，拖放目标至少要监听三个事件。

To accept a drop, the drop target has to listen to at least three events.

The dragenter event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.
The dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute’s value.
Finally, the drop event, which allows the actual drop to be performed.

以下是将一个对象 drop 到另一个对象中的示例

Following is the example to drop an object into another object

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      #boxA,
      #boxB {
         float: left;
         padding: 10px;
         margin: 10px;
         -moz-user-select: none;
      }

      #boxA {
         background-color: #6633FF;
         width: 75px;
         height: 75px;
      }

      #boxB {
         background-color: #FF6699;
         width: 150px;
         height: 150px;
      }
   </style>
   <script type="text/javascript">
      function dragStart(ev) {
         ev.dataTransfer.effectAllowed = 'move';
         ev.dataTransfer.setData("Text",
                        ev.target.getAttribute('id'));
         ev.dataTransfer.setDragImage(ev.target, 0, 0);
         return true;
      }

      function dragEnter(ev) {
         event.preventDefault();
         return true;
      }

      function dragOver(ev) {
         return false;
      }

      function dragDrop(ev) {
         var src = ev.dataTransfer.getData("Text");
         ev.target.appendChild(document.getElementById(src));
         ev.stopPropagation();
         return false;
      }
   </script>
</head>
<body>
   <center>
      <h2>Drag and drop HTML5 demo</h2>
      <div>
         Try to move the purple box into the pink box.
      </div>
      <div id="boxA"
           draggable="true"
           ondragstart="return dragStart(event)">
               <p>Drag Me</p>
      </div>
      <div id="boxB"
           ondragenter="return dragEnter(event)"
           ondrop="return dragDrop(event)"
           ondragover="return dragOver(event)">
                  Dustbin
      </div>
   </center>
</body>
</html>