ContentEditable DIV - 禁用拖放

时间:2010-06-13 17:14:46

标签: javascript html5 contenteditable

是否可以在contentEditable属性设置为true的元素上禁用拖放功能。

我有以下HTML页面。

<!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>

我面临的主要问题是可以将图像拖放到DIV中并将其复制(连同标题和点击处理程序)

6 个答案:

答案 0 :(得分:28)

以下代码段会阻止您的div接收拖动的内容:

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

我(and several others)发现这个api很奇怪并且反直觉,但它确实阻止了在IE8(包括IE9 beta)之外的所有浏览器中接收拖动内容。到目前为止,我无法阻止IE8接受contenteditable。

如果我找到了办法,我会更新这个答案。

答案 1 :(得分:3)

有趣的是,我不知道拖放界面是否足够确定,但看起来这里存在某种错误。我稍微修改了你的代码,为可编辑div上的drop事件添加了一个处理程序:

<!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>

我正在使用Firefox 3.7 alpha进行测试:如果我将图像拖到文本中间,事件会触发,我会收到警报,return false会停止删除图像。但是,如果我拖到文本的开头,事件不会触发,但图像会插入div中。请注意,在Firefox 3.6和Chromium 6.0中,事件根本不会触发,所以要么我完全误解了它是如何工作的,要么就是现在还没有完全依赖它。

答案 2 :(得分:2)

在Chrome和Firefox中,您必须取消ondragover事件才能触发ondrag事件。我还建议取消ondragenterondragleave事件,以确定。

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>

此行为不是错误;在HTML5规范中,它说ondragover必须取消ondrag才能触发。这样做是没有任何意义的,所以我希望他们能尽快改变它。见http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

答案 3 :(得分:2)

我发现我需要将dropEffect设置为&#39; none&#39;对于dragenter和dragover来说,拒绝阻力。如果你没有绑定dragenter,当拖动进入元素时光标会闪烁,所以代码是:

&#13;
&#13;
<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()">
&#13;
&#13;
&#13;

答案 4 :(得分:0)

是否可以禁用图像上的所有mousedown事件?

$('img').on('mousedown', function(){
    return false;
});

答案 5 :(得分:0)

您需要使用dragstart事件并防止出现默认行为。这适用于所有现代浏览器。

document.addEventListener('dragstart', event => {
  event.preventDefault()
})
<div contenteditable="true">This is editable content</div>
<span>This is not editable content</span>
<img width="20" src="https://www.iconsdb.com/icons/preview/barbie-pink/bookmark-5-xxl.png">