16.2.1拖拽事件

通过拖拽事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定哪里发生了拖放事件，有些事件是在被拖动的元素上触发的，

而有些事件是在放置目标上触发的。拖动元素时，将依次触发以下事件：

1、dragstart

2、drag

3、dragend

按下鼠标键并开始移动移动鼠标时，会在被拖放的元素上触发dragstart事件。此时光标变成不能放符号，表示不能把元素放到自己上面。拖动开始时，可以通过ondragstart

事件处理程序运行JavaScript代码。

触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件。这个事件与mousemove事件相似，在鼠标移动过程中，mousemove事件也会持续发生。

当拖动停止时（无论把元素放到有效的放置目标，还是放到了无效的放置目标上），会触发dragend事件。

 

上述三个事件的目标都是被拖动的元素，默认情况下,浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过大多数浏览器会为正被拖动的元素创建一个半透明的副本，

这个副本始终跟随着光标移动。

 

当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生：

1、dragenter

2、dragover

3、dragleave或drop

只要有元素被拖动到放置目标上，就会触发dragenter事件（类似mouseover事件）。紧随其后的是dragover事件，而且在被拖动的元素还在放置目标的范围内移动时，

就会持续触发该事件，如果元素被拖出放置目标，dragover事件不再发生，但会触发dragleave事件（类似于moveout事件）。

如果元素被放到了放置目标中，则会触发drop事件而不是drapleave事件。上述三个事件的目标都是作为放置目标的元素。