Drag event on contentEditable

Question

What event is fired when someone removes something in the contentEditable element (after drag and drop)?

I'm talking about simple old drag and drop without dragging HTML5 (where any element can be made drag and drop); use case is simple:

• the page uses the contentEditable element used as an editor
• the user drags and removes some HTML from the current page or from another page or from another browser window (therefore, in fact, there is no concept of a “source” object: the source can come from outside the browser)
• I need to get a notification that the content has been deleted in the contentDditable div so that I can work on it (clear it)

I could question the div to see if there was anything unclean, but it was expensive and ugly; there is probably an event that fires when a drop occurs ...?

Answer 1

I had the same problem when writing the tinyMCE plugin. I found a better way to track and drag items in the contentEditable area to listen for the DOMNodeInserted event in the contentEditable element.

Note that this element is triggered by the contentEditable element when the drop is executed, so that its target property is set to this element. You can get the moved item by specifying the event.originalEvent.target property.

, 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
      }
});