在contentEditable元素中拖放事件

Question

当一个东西在contentEditable元素中丢弃时(拖动后)会触发什么事件？

我说的是普通的拖放,而不是HTML5拖放(任何元素都可以拖动); 用例很简单:

• 页面上有一个contentEditable div,用作编辑器
• 用户从当前页面或其他页面或其他浏览器的窗口拖放一些HTML(因此实际上没有任何"源"对象的概念:源可以来自浏览器外部)
• 我需要通知内容已被删除到contentEditable div中,以便我可以对其进行操作(清理它)

我可以轮询div来看看那里有什么东西不干净,但是它很贵而且"丑陋"; 肯定有一个事件会在发生跌落时触发......？

Answer 1

我在编写tinyMCE插件时遇到了同样的问题.我发现在contentEditable区域中跟踪元素拖放的最佳方法是在contentEditable元素上侦听'DOMNodeInserted'事件.

请注意,执行放置时,contentEditable元素会触发此元素,以便将其target属性设置为此元素.您可以通过检查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
      }
});