javscript_DOM 拖动事件

拖拉事件

拖拉 drag ，是指用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。

一旦某个元素节点的 draggable 属性设为true，就无法再用鼠标选中该节点内部的 文字 或 子节点 了

• • 拖拉的对象：

除了 元素节点 默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的

• • 为了让 元素节点 可拖拉，可以将该节点的 draggable 属性设为 true

• <div draggable="true">
      此区域可拖拉
  </div>

图片（<img>）和 链接（<a>）不加这个属性，就可以拖拉。

往往是将 draggable 其设为 false，防止拖拉这两种元素

• 当 元素节点 或 选中的文本 被拖拉时，就会持续触发拖拉事件

drag            拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。

dragstart            用户开始拖拉时，在被拖拉的节点上触发

该事件的 target 属性是被拖拉的节点。

通常应该在这个事件的监听函数中，指定拖拉的数据。

dragend            拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发

该事件的 target 属性是被拖拉的节点。

它与 dragstart 事件，在同一个节点上触发。

不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。

• 在 某节点 触发

dragenter            拖拉进入 某节点 时，在 某节点 上触发一次

该事件的 target 属性是 某节点。

通常应该在这个事件的监听函数中，指定是否允许在 某节点 放下（drop）拖拉的数据。

如果 某节点 没有该事件的监听函数，或者 监听函数不执行任何操作，就意味着不允许在当前节点放下数据。

在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。

dragover            拖拉到 某节点 上方时，在 某节点 上持续触发（相隔几百毫秒）

该事件的 target 属性是 某节点 。

该事件与 dragenter 事件的区别是

• • • • • • dragenter事件在进入该节点时触发
          • 只要没有离开这个节点，dragover 事件会持续触发。

dragleave            拖拉操作离开 某节点 范围时，在 某节点 上触发一次

该事件的 target 属性是当前节点

如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。

drop            被拖拉的节点或选中的文本，释放到 某节点 时，在 某节点 上触发

注意： 

• • • • • 如果 某节点 不允许 drop，即使在该节点上方松开鼠标键，也不会触发该事件
        • 如果用户按下 ESC 键，取消这个操作，也不会触发该事件

该事件的监听函数负责取出拖拉数据，并进行相关处理

• 实例：

动态改变被拖动节点的背景色

•  div.addEventListener('dragstart', function (e) {
      this.style.backgroundColor = 'red';
  }, false);
  
  div.addEventListener('dragend', function (e) {
      this.style.backgroundColor = 'green';
  }, false);