ansaurus

Question

ContentEditable DIV - disabling drag and drop

Answer 1

A:

Interesting, I don't know the drag and drop interface well enough to be sure, but it looks like there's some sort of bug here. I modified your code slightly to add a handler for the drop event on the editable div:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ContentEditable</title>
</head>
<body>
    <div contenteditable="true" ondrop="window.alert('dropped!');return false;">This is editable content</div>
    <span>This is not editable content</span>
    <span>
        <img src="bookmark.png" title="Click to do foo" onclick="foo()">
    </span>
</body>
</html>

I'm testing in Firefox 3.7 alpha: if I drag the image on to the middle of the text the event fires, I get an alert, and the return false stops the image being dropped. However if I drag on to the start of the text the event doesn't fire but the image gets inserted inside the div. Mind you, in Firefox 3.6 and Chromium 6.0 the event doesn't fire at all, so either I've completely misunderstood how it works or none of it works well enough right now to rely on.

robertc 2010-06-16 22:07:27

Answer 2

A:

i have already answered to a similar question try reading this:

http://stackoverflow.com/questions/2725264/jeditable-accidentally-triggering-on-draggable-on-nested-items

aSeptik 2010-06-21 23:56:41

Answer 3

A:

In Chrome and Firefox, you have to cancel the ondragover event for the ondrag event to fire. I would also recommend canceling the ondragenter and ondragleave events just to be sure.

http://jsbin.com/itugu/2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ContentEditable</title>
</head>
<body>
    <div contenteditable="true" ondragenter="return false;" ondragleave="return false;" ondragover="return false;" ondrop="window.alert('dropped!');return false;">This is editable content</div>
    <span>This is not editable content</span>
    <span>
        <img src="bookmark.png" title="Click to do foo" onclick="foo()">
    </span>
</body>
</html>

This behavior isn't a bug; in the HTML5 specification it says that ondragover must be canceled for ondrag to fire. It doesn't make any sense to do it this way, so I hope they change it soon. See http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Na7coldwater 2010-06-26 18:58:43

Answer 4

+1 A:

The following snippet will prevent your div from receiving dragged content:

jQuery('div').bind('dragover drop', function(event){
    event.preventDefault();
    return false;
});

I (and several others) find this api to be strange and counter-intuitive, but it does prevent a contenteditable from receiving dragged content in all browsers except IE8 (including IE9 beta). As of yet, I cannot prevent IE8 from accepting contenteditable.

I'll update this answer if I find a way to do so.

brad 2010-10-13 18:49:32

ansaurus

tags:

views:

answers:

ContentEditable DIV - disabling drag and drop

related questions