當您將文件從桌面拖到瀏覽器時觸發的JavaScript事件是什麼

我試圖實現類似於gmail的文件上傳系統。我已經完成了所有的Fileupload/AJAX問題，並且它非常完美。我唯一的問題是用戶反饋。當您將文件從桌面拖到瀏覽器時觸發的JavaScript事件是什麼

例如..在gmail中，當你拖動一個文件到你的瀏覽器（假設IE9 +用戶）時，彈出一個區域，讓你放入文件。我認爲這是一種JavaScript事件，被一個框架捕獲（比方說Jquery），這使我可以在放置區域製作一些很酷的動畫。

我的問題很簡單..我應該捕捉什麼事件來做到這一點？有任何想法嗎？我做錯了嗎？

2012-01-30 Janx from Venezuela

主要事件只是drop。

您還需要處理dragenter和dragleave，否則放置操作只會導致放置文件的負載。您也可以選擇觀看dragover。

我有一些代碼，註冊這些處理程序，如下所示：

var $dz = $('#dropzone'); 
$dz.on({ 
    dragenter: dragenter, 
    dragleave: dragleave, 
    dragover: false, 
    drop: drop 
}); 

function dragenter() { 
    $dz.addClass('active'); 
}; 

function dragleave() { 
    $dz.removeClass('active'); 
}; 

function drop(e) { 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     var files = dt.files; 
     ... 
    } 
    $dz.removeClass('active'); 
};

在這種情況下，dragenter和dragleave處理程序存在只是爲了改變拖放區的外觀時，東西是被拖入了。

來源

2012-01-30 16:31:37 Alnitak

很酷！我希望我的老闆會想要這個功能。 – gdoron 2012-01-30 16:38:40

嗯，這實際上是有點工作，但只有當我通過拖放區域的拖動項目..我仍然不知道拖放區域在哪裏..所以我想......好。而不是$（element）.on ....使用$（「body」）。on ...它觸發得很好，但是當我輸入到任何其他div（讓我說我的頁面以固定寬度爲中心，所以我們可能會說「純粹的身體標記」在兩邊都有一些空的空間），然後觸發離開處理程序......我想弄清楚如何在整個頁面上保持「輸入」，並只觸發當它完全離開瀏覽器區域時「離開」。感謝您的幫助 – 2012-01-30 19:12:12

此外，它類似sux ..似乎事件「dragenter」觸發鼠標移動的每個像素。所以我們可以說我在dropzone上播放了一個很好的「搖動」效果2秒..好吧，它實際上感覺就像它的凍結，因爲只要我繼續移動鼠標，它就不會停止搖晃。 – 2012-01-30 19:51:41

它被稱爲drop，您需要的事件對象的屬性將位於originalEvent屬性中。

$(element).on("drop",function(e){ 
    console.log(e.originalEvent) 
});

你還需要解除綁定dragenter和dragleave同一元素爲它火drop事件，如果我沒有記錯。

$(element).on("dragenter dragleave", false);

來源

2012-01-30 16:32:23

關於dragenter和dragleave的好消息 - 我把它們放在我的代碼中，但忘記了它們實際上是需要的。 – Alnitak 2012-01-30 16:44:11

@Alnitak - 是的，當我第一次嘗試實現這個功能時，它讓我感覺到了一個循環。我最終拋棄了整個想法，並使用jquery的拖放功能，因爲我正在使用文本區域，並通過正常使用textarea來綁定這些事件。 – 2012-01-30 16:46:23

當您將文件從桌面拖到瀏覽器時觸發的JavaScript事件是什麼

回答

相關問題