在contentEditable元素中拖放事件 [英] Drag and drop event in a contentEditable element

问题描述

当在一个contentEditable元素中拖放某些东西（拖动后）时，什么事件被触发？

What event is fired when one drops something in a contentEditable element (after dragging)?

我正在谈论简单的旧拖放，而不是HTML5拖动掉落（任何元素都可以拖动）;用例很简单：

I'm talking about plain old drag and drop, NOT HTML5 drag and drop (where any element can be made draggable); the use case is simply:

• 页面上有一个contentEditable div，用作编辑器


• 用户拖动并从当前页面或另一页面或另一个浏览器的窗口拖放一些HTML（所以实际上没有任何源对象的概念：源代码可能来自浏览器外）


• 我需要收到通知，内容已被删除到contentEditable div，以便我可以采取行动（清理）

我可以轮询div，看看有没有什么不干净，但它是昂贵的和丑陋的;确实有一个事件发生时，发生一个下降发生...？

I could poll the div to see if anything's there that's not clean, but it's expensive and "ugly"; surely there's an event that fires when a drop occurs...?

推荐答案

我在编写一个tinyMCE插件时遇到同样的问题。
我发现跟踪contentEditable区域中元素拖放的最佳方式是收听contentEditable元素上的DOMNodeInserted事件。

I faced the same problem while writing a tinyMCE plugin. What I found the best way to track drag and drop of elements in a contentEditable zone is to listen to the 'DOMNodeInserted' event on the contentEditable element.

请注意，执行drop时，contentEditable元素会触发该元素，以将其target属性设置为此元素。
您可以通过检查event.originalEvent.target属性来检索已移动的元素。

Note that this element is fired by the contentEditable element when the drop is performed so that its target property is set to this element. You can retrieve the moved element by checking the event.originalEvent.target property.

请注意，一旦下降完成，此事件就会触发， drop元素已插入。

Be aware that this event is fired once the dropped is finished and that the drop element has been inserted.

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

这篇关于在contentEditable元素中拖放事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！