HTML5拖放API

???????????????????????????????????????????? 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>