Drag and Drop: data replacement

Question

I have a webpage with some html elements, including a text box and inline content-accessible iframe (a rte).

Using this code, I can catch the draggesture event on the main page and set the text / html data

jQuery(document).bind('draggesture', function(event){ event.originalEvent.dataTransfer.setData('text/html', 'my_data'); }); 

Now when discarding a text field on the main page, 'my_data' is discarded. Removing in a contenteditable iframe drops 'my_data' too.

But I have three questions that I do not understand:

1 .. Linking this kind of handler to an iframes document. I installed the event data by analogy with the code above, but it does not work. When I drag it inside the iframe or into the text box on the main page, "my_data" does not get up, but the original selected content. What can I do to set 'my_data'?

2. I tried to change / set the data using the drop event in the iframe and the main page:

 jQuery(ed.getDoc()).bind('drop', function(event){ event.originalEvent.dataTransfer.setData('text/html', 'my_data'); }); 

But I get javascript error on both documents (main page and iframe): "Modifications are not allowed for this document." Why am I getting this error? Is there a workaround for this? It looks like pimvdb has got an explanation for this.

3. When I select <p>some text</p><hr><p>some text</p> from the main page and drag this content into a contenteditable iframe, nothing gets up when I set 'my_data' (to Draggesture), using the first code example above. Drag and drop into the text box works. Does anyone know what's wrong here? (the problem does not occur with chrome!)

EDIT: Here is the jsFiddle daemon to play around and understand the problem:

http://jsfiddle.net/R2rHn/5/

Answer 1

Used by draggesture , but dragstart works.

Secondly, it makes no sense to set dataTransfer data to drop , because the "drag" drag package has already reached. It is destroyed after the fall, so why would you like to change it at this moment?

I cleaned your violin to understand what is going on, to solve it, and this is the result. It works on Chrome.

http://jsfiddle.net/R2rHn/7/

 tinyMCE.init({ mode : "exact", elements : "content", skin : "o2k7", skin_variant : "silver", setup : function(ed) { ed.onInit.add(function(ed, evt) { var iframe = ed.getDoc(); jQuery(iframe).bind('dragstart', function(event){ event.originalEvent .dataTransfer .setData('text/plain', 'modified_content_from_iframe'); }); }); }, }); jQuery(document).bind('dragstart', function(event){ event.originalEvent .dataTransfer .setData('text/html', 'my_data_html'); event.originalEvent .dataTransfer .setData('text/plain', 'my_data_plain'); });