將事件拖放到contentEditable元素中

當某人在contentEditable元素中放下某些內容（拖動後）時會觸發什麼事件？將事件拖放到contentEditable元素中

我在說簡單的老拖放，而不是HTML5的拖放（其中任何元素可以拖動）;用例是簡單的：

有在頁面上CONTENTEDITABLE DIV，作爲一個編輯
用戶拖動，並從當前頁面或從其他網頁滴一些HTML，或從其他瀏覽器窗口（這樣真的沒有任何「源」對象的概念：源可以來自瀏覽器外部）
我需要通知內容已被放入contentEditable div，以便我可以對其執行操作（清理它）

我可以輪詢分區，看看有沒有什麼'不乾淨，但昂貴且「醜陋」;肯定有一個事件會在發生下降時觸發......？

來源

2011-09-02 Bambax

爲什麼你不想要HTML5拖放事件？ 'ondrop'就是你所需要的'contentEditable' ... –

因爲我需要它在非html5瀏覽器上運行。 – Bambax

我在編寫tinyMCE插件時遇到了同樣的問題。我發現跟蹤contentEditable區域中元素的拖放的最佳方式是偵聽contentEditable元素上的'DOMNodeInserted'事件。

請注意，此元素在執行放置操作時由contentEditable元素觸發，以便將其目標屬性設置爲此元素。您可以通過檢查event.originalEvent.target屬性來檢索移動的元素。

請注意，一旦完成刪除並且已經插入了drop元素，就會觸發此事件。

$('#editor').bind('DOMNodeInserted', function(event){ 
     if(event.originalEvent && event.originalEvent.target){ 
     var target = $(event.originalEvent.target); 
     //now you can check what has been moved 
     } 
});

來源

2011-09-02 08:40:20 Binary9

非常感謝！雖然插入的每個節點都會觸發該事件;它會很高興剛剛被通知「一滴已經執行」，但現在這工作正常！ ;-) – Bambax

目前這是一個合理的解決方法。請注意，IE <9不支持DOM突變事件，所以這在這些瀏覽器中不起作用。此外，DOM突變事件很有可能會在未來的瀏覽器中被刪除並替換爲其他瀏覽器（瀏覽器製造商不喜歡它們並認爲它們是錯誤的）。 –

事實上，規範是這麼說的：「本規範描述了遺傳行爲的引用和完整性的變異事件，但不贊成使用MutationEvent接口和MutationNameEvent接口」（http://www.w3.org/TR/DOM- Level-3-Events /＃events-mutationevents） – Bambax

將事件拖放到contentEditable元素中

回答

相關問題