Js学习之拖拉事件（拖动属性）HTML5 drag API（HTML 拖放 API）

HTML 拖放 API

HTML 拖放界面使应用程序能够在浏览器中使用拖放功能。

用户可以用鼠标选择可拖动元素，将这些元素拖动到可放置元素，然后通过释放鼠标按钮放置它们。在拖动操作期间，可拖动元素的半透明表示跟随指针。

对于网站、扩展和 XUL 应用程序，您可以自定义哪些元素可以变为可拖动、可拖动元素产生的反馈类型以及可放置元素。

本 HTML 拖放概述包括对接口的描述、向应用程序添加拖放支持的基本步骤以及接口的互操作性摘要。

拖动事件

HTML 拖放使用DOM event model和drag events继承自mouse events. 典型的拖动操作从用户选择一个可拖动元素，将该元素拖动到一个可放置元素，然后释放拖动的元素时开始。

在拖动操作期间，会触发多种事件类型，并且某些事件可能会触发多次，例如draganddragover事件。

每个拖动事件类型都有一个关联的全局事件处理程序：

事件	事件处理程序	当…时触发
drag	ondrag	…拖动的项目（元素或文本选择）被拖动。
dragend	ondragend	…拖动操作结束（例如释放鼠标按钮或按下 Esc 键；请参阅 完成拖动。）
dragenter	ondragenter	…拖动的项目进入有效的放置目标。（请参阅 指定放置目标。）
dragleave	ondragleave	…拖动的项目会留下有效的放置目标。
dragover	ondragover	…每隔几百毫秒，一个被拖动的项目被拖动到一个有效的放置目标上。
dragstart	ondragstart	…用户开始拖动一个项目。（请参阅 开始拖动操作。）
drop	ondrop	…一个项目被放置在一个有效的放置目标上。（请参阅 执行拖放。）

注意：将文件从操作系统拖入浏览器时，既dragstart不会触发也不会触发事件。dragend

接口

HTML拖放接口是DragEvent、DataTransfer和。DataTransferItemDataTransferItemList

该DragEvent接口有一个构造函数和一个dataTransfer属性，它是一个DataTransfer对象。

DataTransfer对象包括拖动事件的状态，例如正在完成的拖动类型（如copy或move）、拖动数据（一个或多个项目）以及每个拖动项目的 MIME 类型。DataTransfer对象还具有向拖动数据添加或删除项目的方法。

DragEvent和DataTransfer接口应该是向应用程序添加 HTML 拖放功能所需的唯一接口。（Firefox 支持该对象的一些Gecko 特定扩展DataTransfer，但这些扩展仅适用于 Firefox。）

每个DataTransfer对象都包含一个items属性，它是list对象的一个DataTransferItem​​。一个DataTransferItem对象代表一个单独的拖动项，每个项都有一个kind属性（或者string或file）和一个type用于数据项的 MIME 类型的属性。该DataTransferItem对象还具有获取拖动项数据的方法。

DataTransferItemList对象是对象列表DataTransferItem。列表对象具有向列表中添加拖动项、从列表中删除拖动项以及清除所有拖动项的列表的方法。

DataTransfer和接口之间的一个关键区别在于DataTransferItem前者使用同步getData()方法来访问拖动项的数据，而后者则使用异步getAsString()方法。

注意： DragEvent并且DataTransfer在桌面浏览器上得到广泛支持。但是，DataTransferItem和DataTransferItemList接口对浏览器的支持有限。有关拖放互操作性的更多信息，请参阅互操作性。

Gecko 特定接口

Mozilla 和 Firefox 支持标准拖放模型中没有的一些功能。这些是帮助拖动多个项目或非字符串数据（例如文件）的便利功能。有关详细信息，请参阅拖放多个项目。此外，请参阅DataTransfer所有Gecko 特定属性和Gecko 特定方法的参考页。

基础

本节总结了向应用程序添加拖放功能的基本步骤。

识别什么是可拖动的

使元素可拖动需要添加draggable属性和ondragstart全局事件处理程序，如以下代码示例所示：

<span style="color:var(--code-default)"><span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>
  <span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragstart_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
    <span style="color:var(--code-token-comment)">// Add the target element's id to the data transfer object</span>
    ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">setData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"text/plain"</span><span style="color:var(--code-token-punctuation)">,</span> ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span>id<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
  <span style="color:var(--code-token-punctuation)">}</span>

  window<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">addEventListener</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">'DOMContentLoaded'</span><span style="color:var(--code-token-punctuation)">,</span> <span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-punctuation)">)</span> => <span style="color:var(--code-token-punctuation)">{</span>
    <span style="color:var(--code-token-comment)">// Get the element by id</span>
    <span style="color:var(--code-token-tag)">const</span> element = document<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">getElementById</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"p1"</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
    <span style="color:var(--code-token-comment)">// Add the ondragstart event listener</span>
    element<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">addEventListener</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"dragstart"</span><span style="color:var(--code-token-punctuation)">,</span> dragstart_handler<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
  <span style="color:var(--code-token-punctuation)">}</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>

<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span> <span style="color:var(--code-token-attribute-name)">id</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>p1<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">draggable</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>true<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-punctuation)">></span></span>This element is draggable.<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span></span>

复制到剪贴板

有关更多信息，请参阅：

• 可拖动属性参考
• 拖动操作指南

定义拖动的数据

该应用程序可以自由地在拖动操作中包含任意数量的数据项。每个数据项都是string一个特定的type——通常是 MIME 类型，例如text/html.

每个drag event都有一个保存事件数据的dataTransfer属性。这个属性（它是一个对象）也有管理拖拽数据的方法。该方法用于在拖动数据中添加一个项目，如下例所示。DataTransfersetData()

<span style="color:var(--code-default)"><span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragstart_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
  <span style="color:var(--code-token-comment)">// Add different types of drag data</span>
  ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">setData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"text/plain"</span><span style="color:var(--code-token-punctuation)">,</span> ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span>innerText<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
  ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">setData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"text/html"</span><span style="color:var(--code-token-punctuation)">,</span> ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span>outerHTML<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
  ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">setData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"text/uri-list"</span><span style="color:var(--code-token-punctuation)">,</span> ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span>ownerDocument<span style="color:var(--code-token-punctuation)">.</span>location<span style="color:var(--code-token-punctuation)">.</span>href<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
</code></span></span>

复制到剪贴板

• 有关拖放中使用的常见数据类型（例如文本、HTML、链接和文件）的列表，请参阅推荐的拖动类型。
• 有关拖动数据的更多信息，请参阅拖动数据。

定义拖动图像

默认情况下，浏览器会在拖动操作期间提供显示在指针旁边的图像。但是，应用程序可以使用该setDragImage()方法定义自定义图像，如下例所示。

<span style="color:var(--code-default)"><span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragstart_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
  <span style="color:var(--code-token-comment)">// Create an image and then use it for the drag image.</span>
  <span style="color:var(--code-token-comment)">// NOTE: change "example.gif" to a real image URL or the image</span>
  <span style="color:var(--code-token-comment)">// will not be created and the default drag image will be used.</span>
  <span style="color:var(--code-token-tag)">let</span> img = <span style="color:var(--code-token-tag)">new</span> <span style="color:var(--code-token-attribute-name)">Image</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
  img<span style="color:var(--code-token-punctuation)">.</span>src = <span style="color:var(--code-token-attribute-value)">'example.gif'</span><span style="color:var(--code-token-punctuation)">;</span>
  ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">setDragImage</span><span style="color:var(--code-token-punctuation)">(</span>img<span style="color:var(--code-token-punctuation)">,</span> <span style="color:var(--code-token-attribute-value)">10</span><span style="color:var(--code-token-punctuation)">,</span> <span style="color:var(--code-token-attribute-value)">10</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
</code></span></span>

复制到剪贴板

在以下位置了解有关拖动反馈图像的更多信息：

• 设置拖动反馈图像

定义拖动效果

该dropEffect属性用于控制在拖放操作期间给用户的反馈。它通常会影响浏览器在拖动时显示的光标。例如，当用户将鼠标悬停在放置目标上时，浏览器的光标可能会指示将发生的操作类型。

可以定义三种效果：

1. copy表示拖动的数据将从其当前位置复制到放置位置。
2. move表示拖动的数据将从当前位置移动到放置位置。
3. link表示将在源位置和放置位置之间创建某种形式的关系或连接。

在拖动操作期间，可以修改拖动效果以指示在某些位置允许某些效果。

以下示例显示了如何使用此属性。

<span style="color:var(--code-default)"><span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragstart_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
  ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span>dropEffect = <span style="color:var(--code-token-attribute-value)">"copy"</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
</code></span></span>

复制到剪贴板

有关更多详细信息，请参阅：

• 拖动效果

定义放置区

默认情况下，浏览器在将某些内容拖放到大多数 HTML 元素上时会阻止任何事情发生。要更改该行为以使元素成为放置区或可放置，该元素必须同时具有ondragover和ondrop事件处理程序属性。

以下示例展示了如何使用这些属性，并包含每个属性的基本事件处理程序。

<span style="color:var(--code-default)"><span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>
<span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragover_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
 ev<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">preventDefault</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span>dropEffect = <span style="color:var(--code-token-attribute-value)">"move"</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
<span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">drop_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
 ev<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">preventDefault</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 <span style="color:var(--code-token-comment)">// Get the id of the target and add the moved element to the target's DOM</span>
 <span style="color:var(--code-token-tag)">const</span> data = ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">getData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"text/plain"</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">appendChild</span><span style="color:var(--code-token-punctuation)">(</span>document<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">getElementById</span><span style="color:var(--code-token-punctuation)">(</span>data<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>

<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span> <span style="color:var(--code-token-attribute-name)">id</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>target<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">ondrop</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>drop_handler(event)<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">ondragover</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>dragover_handler(event)<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-punctuation)">></span></span>Drop Zone<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span></span>

复制到剪贴板

请注意，每个处理程序都会调用preventDefault()以防止对此事件进行额外的事件处理（例如触摸事件或指针事件）。

有关更多信息，请参阅：

• 指定放置目标

处理掉落效果

该drop事件的处理程序可以自由地以特定于应用程序的方式处理拖动数据。

通常，应用程序使用该getData()方法检索拖动项，然后相应地处理它们。此外，应用程序语义可能会根据dropEffect修饰键的值和/或状态而有所不同。

以下示例显示了一个放置处理程序id从拖动数据中获取源元素，然后使用id将源元素移动到放置元素：

<span style="color:var(--code-default)"><span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>
<span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragstart_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
 <span style="color:var(--code-token-comment)">// Add the target element's id to the data transfer object</span>
 ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">setData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"application/my-app"</span><span style="color:var(--code-token-punctuation)">,</span> ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span>id<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span>effectAllowed = <span style="color:var(--code-token-attribute-value)">"move"</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
<span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">dragover_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
 ev<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">preventDefault</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span>dropEffect = <span style="color:var(--code-token-attribute-value)">"move"</span>
<span style="color:var(--code-token-punctuation)">}</span>
<span style="color:var(--code-token-tag)">function</span> <span style="color:var(--code-token-attribute-name)">drop_handler</span><span style="color:var(--code-token-punctuation)">(</span>ev<span style="color:var(--code-token-punctuation)">)</span> <span style="color:var(--code-token-punctuation)">{</span>
 ev<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">preventDefault</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 <span style="color:var(--code-token-comment)">// Get the id of the target and add the moved element to the target's DOM</span>
 <span style="color:var(--code-token-tag)">const</span> data = ev<span style="color:var(--code-token-punctuation)">.</span>dataTransfer<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">getData</span><span style="color:var(--code-token-punctuation)">(</span><span style="color:var(--code-token-attribute-value)">"application/my-app"</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
 ev<span style="color:var(--code-token-punctuation)">.</span>target<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">appendChild</span><span style="color:var(--code-token-punctuation)">(</span>document<span style="color:var(--code-token-punctuation)">.</span><span style="color:var(--code-token-attribute-name)">getElementById</span><span style="color:var(--code-token-punctuation)">(</span>data<span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">)</span><span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>script</span><span style="color:var(--code-token-punctuation)">></span></span>

<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span> <span style="color:var(--code-token-attribute-name)">id</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>p1<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">draggable</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>true<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">ondragstart</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>dragstart_handler(event)<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-punctuation)">></span></span>This element is draggable.<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>div</span> <span style="color:var(--code-token-attribute-name)">id</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>target<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">ondrop</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>drop_handler(event)<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">ondragover</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>dragover_handler(event)<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-punctuation)">></span></span>Drop Zone<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>div</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span></span>

复制到剪贴板

有关更多信息，请参阅：

• 执行拖放

拖尾

在拖动操作结束时，该dragend事件在源元素（拖动开始的目标元素）处触发。

无论拖动是完成还是取消，都会触发此事件。dragend事件处理程序可以检查属性的值以dropEffect确定拖动操作是否成功。

有关处理拖动操作结束的更多信息，请参阅：

• 完成拖动

互操作性

从DataTransferItem 接口的浏览器兼容性表中可以看出，桌面浏览器之间的拖放互操作性比较广泛（除了DataTransferItem和DataTransferItemList接口支持较少）。该数据还表明移动浏览器之间的拖放支持非常低。

示例和演示

• DataTransfer使用界面复制和移动元素
• DataTransferListItem使用界面复制和移动元素
• 拖放文件（仅限 Firefox）：https ://jsfiddle.net/9C2EF/
• 拖放文件（所有浏览器）：https ://jsbin.com/hiqasek/
• 使用拖放 API 的停车项目：https ://park.glitch.me/ （您可以在此处编辑）

规格

规格	状态	评论
HTML生活标准	生活水平

也可以看看

• 拖动操作
• 拖放多个项目
• 推荐的拖动类型
• HTML5 生活标准：拖放
  
   

资料：

HTML Drag and Drop API - Web APIs | MDNHTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API