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 2015年7月.
dragstart 事件在用户开始拖动元素或被选择的文本时调用。
语法
在 addEventListener() 等方法中使用事件名称，或者设置事件处理器属性。
js
addEventListener("dragstart", (event) => {}); ondragstart = (event) => {}; 事件类型
事件属性
除了以下的属性，来自父接口 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 # handler-ondragstart |
| HTML # event-dnd-dragstart |