HTML5 draggable属性详解：拖拽事件与DOM操作实战

摘要

HTML5新增的draggable属性允许为任意HTML元素添加拖动功能。该属性关联了一系列用于控制拖动行为的事件方法。本文将重点阐述draggable属性的具体用法及其典型应用场景。

1. 掌握draggable属性的基本用法

为了直观理解draggable属性的作用，首先通过一个示例展示其基本效果：

在拖拽操作中，通常涉及两个关键角色：

（1）源元素A：被拖动的对象 （2）目标元素B：接收拖拽的对象

接下来在body中构建这两个元素：

<body>
  <div id="Adiv" class="A">
    A---拖拽的元素
  </div>
  <div id="Bdiv" class="B">
    B---A被拖进的元素
  </div>
</body>

实现拖拽功能需牢记两个核心要点：

（1）源元素A必须设置draggable属性，且值设为true （2）目标元素B需在dragover和dragenter事件中调用preventDefault()阻止默认行为。暂无需深究这两个事件的具体作用，按此配置即可实现基础效果。

<body>
  <div draggable="true" id="Adiv" class="A">
    A---拖拽的元素
  </div>
  <div id="Bdiv" class="B">
    B---A被拖进的元素
  </div>
</body>

<script>
  Bdiv.ondragover = function(e){
    e.preventDefault();
  }
  Bdiv.ondragenter = function(e){
    e.preventDefault();
  }
</script>

完成上述配置后，元素A即可被拖入元素B的范围内。

注意：此时仅实现了视觉上的拖入效果。松开鼠标后，元素A仍会回到原位，并未真正成为B的子元素。

2. 源元素A的拖动事件

明确了源元素A和目标元素B的角色后，接下来分析在拖动源元素A过程中可控制的事件：

（1）dragstart事件：

当用户按下鼠标并移动时，会在源元素A上触发dragstart事件。此时鼠标光标会变为“禁止”符号，直到拖动到允许放置的目标元素上，该符号才会消失。

所谓“允许放置”的目标元素，即指在dragover和dragenter事件中调用了preventDefault()阻止默认行为的元素。

通过以下示例演示dragstart事件：在拖动源元素A时，将其背景色变为黄色。

  Adiv.ondragstart = function(){
    this.style.backgroundColor = 'yellow'
  }

（2）drag事件

该事件在dragstart之后触发。只要处于拖动过程中，该事件就会持续触发。

  Adiv.ondrag = function(){
    console.log('drag事件');
  }

（3）dragend事件

该事件在拖动结束时触发，即用户松开鼠标按键的瞬间。

上述三个事件均作用于被拖拽的元素，即设置了draggable属性为true的元素。

在实际开发中，最常用的是dragstart事件。通常在此事件中保存被拖拽元素的引用，以便后续操作。

3. 目标元素B的接收事件

针对目标元素的接收事件，无需元素具备draggable属性。任何元素均可使用这些事件，但必须注意前述两点：在dragover和dragenter中阻止默认行为。

（1）dragenter事件

当源元素A拖入目标元素B内部时，B会触发dragenter事件。任何draggable属性为true的元素拖入B中，均会触发此事件。

注意：此事件的触发不需要松开鼠标。

通过以下示例说明：当源元素A拖入目标元素B时，如何使A真正成为B的子元素：

  Bdiv.ondragenter = function(e){
    e.preventDefault();
    this.appendChild(Adiv);
  }

（2）dragover事件

只要源元素A在目标元素B内部移动，该事件就会持续触发。

  Bdiv.ondragover = function(e){
    console.log('dragover事件');
    e.preventDefault();
  }

（3）dragleave事件

当源元素A从目标元素B内部离开时，会触发dragleave事件。

需注意：必须先进入B（触发dragenter），再离开B时才会触发dragleave。

（4）drop事件

当源元素A被放置到目标元素B中时触发drop事件。与dragenter的区别在于，drop事件需松开鼠标后才触发。这是最常用的事件。

至此，关于JS draggable属性的介绍结束。如需了解更多相关js拖拽属性draggable内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！