Databases
StackOverflow2013
Postsdbo
PODragging: Replacement of the data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODragging: Replacement of the data
    text
    copied!<p>I got a webpage with some html elements including a textarea and an embedded contenteditable iframe (a rte).</p> <p>Using this code i manage to catch the draggesture event on the main page and set the text/html-data</p> <pre><code>jQuery(document).bind('draggesture', function(event){ event.originalEvent.dataTransfer.setData('text/html', 'my_data'); }); </code></pre> <p>Now, when dropping in a textarea on the main page 'my_data' gets dropped. Dropping in the contenteditable iframe drops 'my_data' too.</p> <p>But i got three issues here that i do not understand:</p> <p><strong>1.</strong> 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. <strong>What can i do to set 'my_data'?</strong></p> <p><strong>2.</strong> I tried to modify/set the data using the drop event in the iframe and the main page:</p> <pre><code>jQuery(ed.getDoc()).bind('drop', function(event){ event.originalEvent.dataTransfer.setData('text/html', 'my_data'); }); </code></pre> <p>But i get a javascript error on both documents (main page and iframe) : "Modifications are not allowed for this document". <strong>Why do i get this error? Is there a workaround for this?</strong> Looks like pimvdb got an explantion for this.</p> <p><strong>3.</strong> When selecting <code>&lt;p&gt;some text&lt;/p&gt;&lt;hr&gt;&lt;p&gt;some text&lt;/p&gt;</code> 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. <strong>Does anyone know what gets wrong here?</strong> (problem does not occur using chrome!)</p> <p><strong>EDIT:</strong> Here is a jsFiddle demo to play around and understand the problem:</p> <p><a href="http://jsfiddle.net/R2rHn/5/" rel="nofollow">http://jsfiddle.net/R2rHn/5/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload