HTMLElement：dragstart 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

dragstart 事件在用户开始拖动元素或被选择的文本时调用。

语法

在 addEventListener() 等方法中使用事件名称，或者设置事件处理器属性。

js
addEventListener("dragstart", (event) => {});

ondragstart = (event) => {};

事件类型

一个 DragEvent。继承自 Event。

Event UIEvent MouseEvent DragEvent

事件属性

除了以下的属性，来自父接口 Event 的属性也是可用的。

DragEvent.dataTransfer 只读

在拖放交互期间转移的数据。

示例

在拖动开始时设置透明度

在该示例中，我们在容器中有一个可拖动的元素。尝试抓住元素，拖动它进入另一个容器，然后释放它。

我们监听 dragstart 事件，使元素在拖动时半透明。

关于更完整的拖放示例，请参见 drag 事件。

HTML

html
<div id="container">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>

CSS

css
body {
  /* Prevent the user selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}

JavaScript

js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // make it half transparent
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // reset the transparency
  event.target.classList.remove("dragging");
});

结果

规范

Specification
HTML
# ix-handler-ondragstart
HTML
# event-dnd-dragstart

浏览器兼容性

参见