HTML - 拖放 API

拖放 API

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

要使用传统的 HTML4 实现拖放功能，开发者要么必须使用复杂的 JavaScript 编程，要么使用其他 JavaScript 框架，例如 jQuery 等。

现在，HTML5 推出了拖放 (DnD) API，它为浏览器带来了原生的 DnD 支持，从而使编码变得更加容易。它受所有主要浏览器支持，例如 Chrome、Firefox 3.5、Safari 4 等。

创建可拖动的 HTML 元素

您可以使用具有特定元素的draggable 属性来创建可拖动的 HTML 元素。将“true”值设置为draggable 属性，即可使任何 HTML 元素（例如图像、div、文件或链接）启用拖动。

语法

以下语法演示了如何使div 元素可拖动

<div draggable="true">

拖放事件

在拖放操作的各个阶段会触发许多事件。这些事件列在下面：

序号	事件和描述
1	dragstart 当用户开始拖动对象时触发。
2	dragenter 当鼠标在拖动过程中第一次移到目标元素上时触发。此事件的侦听器应指示是否允许在此位置放下。如果没有侦听器，或者侦听器不执行任何操作，则默认情况下不允许放下。
3	dragover 当拖动过程中鼠标移动到元素上时触发此事件。大多数情况下，侦听器期间发生的操作将与 dragenter 事件相同。
4	dragleave 当拖动过程中鼠标离开元素时触发此事件。侦听器应删除用于放下反馈的任何高亮显示或插入标记。
5	drag 每次拖动对象时鼠标移动都会触发。
6	drop 在拖放操作结束时，在发生放下的元素上触发 drop 事件。侦听器将负责检索被拖动的事件并将其插入到放下位置。
7	dragend 当用户在拖动对象时释放鼠标按钮时触发。

注意 - 请注意，只有拖动事件会被触发；在拖动操作期间不会触发鼠标事件，例如 mousemove。

DataTransfer 对象

所有拖放事件的事件侦听器方法都接受 Event 对象，该对象具有名为dataTransfer的只读属性。

event.dataTransfer 返回与事件关联的DataTransfer 对象，如下所示

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

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

序号	属性和描述
1	dataTransfer.dropEffect [ = value ] 返回当前选择的运算类型。可以设置此属性来更改所选操作。可能的值为 none、copy、link 和 move。
2	dataTransfer.effectAllowed [ = value ] 返回允许的操作类型。可以设置此属性来更改允许的操作。可能的值为none、copy、copyLink、copyMove、link、linkMove、move、all 和 uninitialized。
3	dataTransfer.types 返回一个 DOMStringList，其中列出了在 dragstart 事件中设置的格式。此外，如果正在拖动任何文件，则其中一个类型将是字符串“Files”。
4	dataTransfer.clearData ( [ format ] ) 删除指定格式的数据。如果省略参数，则删除所有数据。
5	dataTransfer.setData(format, data) 添加指定的数据。
6	data = dataTransfer.getData(format) 返回指定的数据。如果没有此类数据，则返回空字符串。
7	dataTransfer.files 返回正在拖动的文件的 FileList（如果存在）。
8	dataTransfer.setDragImage(element, x, y) 使用给定的元素更新拖动反馈，替换任何先前指定的反馈。
9	dataTransfer.addElement(element) 将给定的元素添加到用于呈现拖动反馈的元素列表中。

拖放过程

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

步骤 1 - 使对象可拖动

以下是需要采取的步骤：

如果要拖动元素，则需要为该元素将draggable属性设置为true。
为dragstart设置一个事件侦听器，以存储正在拖动的文件。
事件侦听器dragstart将设置允许的效果（复制、移动、链接或某种组合）。

示例

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

<!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>

步骤 2 - 放下对象

要接受放下，放下目标必须至少侦听三个事件。

dragenter事件，用于确定放下目标是否要接受放下。如果要接受放下，则必须取消此事件。
dragover事件，用于确定要向用户显示什么反馈。如果取消了事件，则根据 dropEffect 属性的值更新反馈（通常是光标）。
最后，drop事件，允许执行实际的放下。

示例

以下是将对象放到另一个对象的示例：

<!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>

打印页面