Menu
Is it possible to disable the drag-and-drop functionality on elements which have the contentEditable attribute set to true.
I have the following HTML page.
<!DOCTYPE html>
<html><meta charset="utf-8"><head><title>ContentEditable</title></head>
<body>
<div contenteditable="true">This is editable content</div>
<span>This is not editable content</span>
<img src="bookmark.png" title="Click to do foo" onclick= "foo()">
</span>
</body>
</html>
The main problem I'm facing is that it is possible to drag and drop the image into the DIV and it gets copied (along with the title and the click handler)
358
Just set contentEditable="false" . See this answer.
contenteditable is an HTML attribute that you can add to any HTML element. If its value is true or an empty string, that means that the user can edit it by clicking the element. For example: <div contenteditable="true"> Change me! </ div>
This question already has answers here:$('p[contenteditable]'). keyup(function(e) { return e. which !== 13 });
The contentEditable property of the HTMLElement interface specifies whether or not the element is editable. This enumerated attribute can have the following values: ' true ' indicates that the element is contenteditable . ' false ' indicates that the element cannot be edited.
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.
194
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
