Question

I am dragging text from a paragraph with text / html to a contenteditable div.
I would like to add a wrapping div to the dropped selected text.
I have tried manipulating all the drag and drop listeners with no success.
I thought of manipulating via dataTransfer – but it seems to fail.

e.dataTransfer.setData('Text', '<div>' + e.dataTransfer.getData('Text') +'</div>');

Any ideas?

Answer 1

I did the drag/drop code for chrome recently (v24). It appears you need to specify the dragover handler for the drop target and call event.preventDefault(); action on it, otherwise the drop wont work.

If your problem is only the wrapping of the dragged content, you have a nice example here html5rock presentation

As the previous answer states, you can get the dropped content on the drop handler. Although in chrome I use

 var text = e.dataTransfer.getData('text/plain');
 var html = e.dataTransfer.getData('text/html');

You can get all available mime types by examining the e.dataTransfer.types

It seems that you can set the dragged content on dragstart, but not read it, so this is only available on drop event listener.

 event.dataTransfer.getData('text/plain')