CODEWITHSUNDEEP
javascripthtmliframedrag-and-dropckeditor
Ten Bitcomb
Ten Bitcomb

Reputation: 2374

How can I get HTML5 drag and drop events to work with an iFrame?

I'm using CKEditor, and what I want to do is allow the user to drag an LI element into the editor and use the CKEditor API to then insert the drag data into the text.

The problem I'm having is that CKEditor is using an iFrame inside the WYSIWYG, and this doesn't seem to have "ondrop" or "ondragover" events. Is there some way that I can work around this? I don't need to actually be able to pass data directly into the iFrame. On the drop event, I'd do something like this:

var data = ev.originalEvent.dataTransfer.getData('id');
CKEDITOR.instances.story_body.insertText("[asset-id:" + data + "]");

Upvotes: 1

Views: 2954

Answers (1)

Saar
Saar

Reputation: 2306

See this fiddle I created for you: http://jsfiddle.net/ojt16v8L/

my surrounding div is handling the dragenter, you can obviously do it for drop and any other event.

cont.addEventListener("dragenter",handleDragEnter,false);

BR, Saar

Upvotes: 1

Related Questions