ContentEditable DIV - 禁用拖放答案

【问题标题】：ContentEditable DIV - disabling drag and dropContentEditable DIV - 禁用拖放
【发布时间】：2010-06-13 17:14:46
【问题描述】：

是否可以在 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 中并被复制（连同标题和点击处理程序）

【问题讨论】：

标签： javascript html contenteditable

【解决方案1】：

下面的sn-p会阻止你的div接收拖拽的内容：

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

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

如果我找到方法，我会更新这个答案。

【讨论】：

防止拖动对我在 FF/Chrome@Mac 上没有影响。防止掉落。
编辑：我错了。防止drop 有效。但仅在 Chrome 上阻止dragover。
我正在使用ondragover="return false" ondrop="return false"，我没有发现任何问题。这里需要event.preventDefault() 吗？

【解决方案2】：

有趣的是，我不太了解拖放界面，无法确定，但这里似乎存在某种错误。我稍微修改了您的代码，为可编辑 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 中，该事件根本不会触发，所以要么我完全误解了它的工作原理，要么现在没有一个工作得足够好，无法依赖。

【讨论】：

【解决方案3】：

我发现我需要将 dragenter 和 dragover 的 dropEffect 设置为“none”以拒绝拖动。如果不绑定dragenter，拖动进入元素时光标会闪烁，所以代码为：

<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()">

【讨论】：

【解决方案4】：

在 Chrome 和 Firefox 中，您必须取消 ondragover 事件才能触发 ondrag 事件。我还建议取消 ondragenter 和 ondragleave 事件以确保安全。

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

【讨论】：

【解决方案5】：

是否可以禁用图像上的所有鼠标按下事件？

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

【讨论】：

【解决方案6】：

您需要使用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">

【讨论】：