HTML5拖放API 拖放事件

HTML5拖放API 拖放事件

事件提供了拖放可以控制几乎所有方面的拖放操作。棘手的部分是确定每个事件触发：在拖项目火；别人火下降的目标。

拖动项时，以下事件（按照这个顺序）：

拖曳开始

拖

dragend

此刻你把鼠标按钮和开始移动鼠标的拖曳开始，事件触发的项目被拖。光标更改为无滴符号（用线穿过圈），

说明该项目不能落在自己。你可以使用ondragstart事件处理程序运行javascript代码拖动开始。

后拖曳开始事件发生时，拖动事件火灾和持续射击只要对象是被拖。这是类似于鼠标移动火灾，也多次作为移动鼠标。

当拖动停止（因为你滴项目上无论是有效的或无效的，下降的目标）dragend事件触发。

全部三个项目的目标是把元。默认情况下，浏览器不会在阻力发生变化的拖动元素的外观，所以它是由你来改变外观。

大多数浏览器做的，然而，创建一个元素被拖着，总是立即下光标半透明的克隆。

当一个项目被拖到一个有效的拖放目标，按以下顺序发生的事件：

DragEnter

DragOver

dragleave或下降

这 个DragEnter事件（类似于鼠标悬停火灾事件）一旦项目被拖到下降的目标。

后立即DragEnter火灾的事件，DragOver事件会继续火的项 目被拖在下降的目标边界。

当拖动项的拖放目标外，DragOver停止射击，dragleave事件被触发（类似mouseout）。

如果把项目实际上是 下降的目标，而不是下降的事件触发dragleave。这些活动的目标是降低目标元素。

自定义的拖放目标

当你试图拖了无效的下降的目标， 你看到一个特殊的光标（用线穿过圈）说明你不能放弃。

即使所有的元素都支持拖放目标事件，默认是不允许滴。如果你将一个元素的东西，不让一滴的，

滴事件不 会触发无论用户行动。然而，你可以将任何元素到一个有效的拖放目标通过重写默认行为的DragEnter和DragOver事件例如，如果你有一个

一个ID元素“droptarget”，你可以使用下面的代码，把它变成一个下降的目标：

<trans data-src="var droptarget = document.getElementById("droptarget");

EventUtil.addHandler(droptarget, "dragover", function(event){

    EventUtil.preventDefault(event);

});

EventUtil.addHandler(droptarget, "dragenter", function(event){

    EventUtil.preventDefault(event);

});">无功droptarget =文件。getElementById（“droptarget”）；

eventutil。AddHandler（droptarget，“DragOver”，功能（事件）{ 

eventutil。

preventDefault（事件）；}）；

eventutil。AddHandler（droptarget，“DragEnter”，功能（事件）{ 

eventutil preventDefault（事件。）；</trans>

经过这些改变，你会注意到光标现在表明下降是允许通过拖放目标当拖动元件。同时，该滴事件将火。

在Firefox 3.5 +，一滴事件的默认行为是浏览的网址，投在下降的目标。这意味着一个图像到下降的目标将导致网页浏览的图像文件，

这是落在无效的URL错误放置目标结果的文本。火狐浏览器的支持，你也必须取消掉事件的默认行为来防止这种导航的发生：

<trans data-src="EventUtil.addHandler(droptarget, "drop", function(event){

    EventUtil.preventDefault(event);

});">eventutil。AddHandler（droptarget，“滴”，功能（事件）{ 

eventutil。preventDefault（事件）；

}）；</trans>