Dragging: Replacement of the data

Question

I got a webpage with some html elements including a textarea and an embedded contenteditable iframe (a rte).

Using this code i manage to 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 dropping in a textarea on the main page 'my_data' gets dropped. Dropping in the contenteditable iframe drops 'my_data' too.

But i got three issues here that i do not understand:

1. Binding this kind of handler to the iframes document works. I set the events data analog to the above code, but it does not work. When i drag it inside the iframe or to the textarea on the main page 'my_data' does not get inserted, but the original selected content. What can i do to set 'my_data'?

2. I tried to modify/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 a javascript error on both documents (main page and iframe) : "Modifications are not allowed for this document". Why do i get this error? Is there a workaround for this? Looks like pimvdb got an explantion for this.

3. When selecting <p>some text</p><hr><p>some text</p> from the main page and dragging this into the contenteditable iframe nothing gets inserted when i set 'my_data' (on Draggesture) using the first code example from above. Dragging into the textarea works. Does anyone know what gets wrong here? (problem does not occur using chrome!)

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

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

Answer 1

You are using draggesture but dragstart works.

Second, it does not make sense to set the dataTransfer data on drop, because the drag "package" has already arrived by then. It's being destroyed after the drop, so why would you like to change it at that point?

I cleaned your fiddle to get straight what was happening so as to be able to solve it, and this is the result. It seems to work 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');
});