ContentEditable DIV - disabling drag and drop

2019-03-15 03:07发布

站内问答 / JavaScript
1969 5 6

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)

5条回答
Melony?
2楼-- · 2019-03-15 03:22

I have found that I need to set the dropEffect to 'none' for both dragenter and dragover to reject a drag. If you don't bind dragenter, the cursor will flicker when the drag enters the element, so the code would be:

<div contenteditable="true" ondragenter="event.preventDefault(); event.dataTransfer.dropEffect = 'none'" ondragover="event.preventDefault(); event.dataTransfer.dropEffect = 'none'">This is editable content</div>
<span>This is not editable content</span>
<img src="bookmark.png" title="Click to do foo" onclick= "foo()">

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
3楼-- · 2019-03-15 03:23

Would it be possible to disable all mousedown events on the image?

$('img').on('mousedown', function(){
    return false;
});
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
4楼-- · 2019-03-15 03:24

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.

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-03-15 03:37

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

查看更多
0人赞 添加讨论(0) 举报
We Are One
6楼-- · 2019-03-15 03:43

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)