(98)Wangdao.com_第三十天_拖拉事件

拖拉事件

拖拉 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);