是否可以在将 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中,但图片会被复制(连同标题和点击处理程序)。
以下代码段将防止您的 div 接收到拖动的内容。
jQuery('div').bind('dragover drop', function(event){
event.preventDefault();
return false;
});
I (和其他几个)发现这个api很奇怪,而且有悖于直觉,但它确实阻止了一个contenteditable在除IE8(包括IE9测试版)以外的所有浏览器中接收拖动的内容。 目前,我还不能阻止IE8接受contenteditable。
如果我找到方法,我会更新这个答案。
有意思,我对拖拽界面不是很了解,无法确定,但看起来这里有某种bug。 我稍微修改了你的代码,为可编辑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>
我在Firefox 3.7 alpha中进行了测试: 如果我把图片拖到文本的中间,事件就会发生,我就会收到一个警告,然后... ... return false
停止图片的投放。 然而,如果我拖动到文本的开始,事件不会发生,但图像会被插入到div中。 要知道,在Firefox 3.6和Chromium 6.0中,该事件根本不会触发,所以要么是我完全误解了它的工作原理,要么是它的工作原理现在还不够好,无法依赖。
在Chrome和Firefox中,你必须要取消 ondragover
活动的 ondrag
事件发射。我还建议取消 ondragenter
和 ondragleave
事件只是为了确定。
<!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>
这种行为并不是一个bug;在HTML5规范中,它规定了 ondragover
必须取消 ondrag
来发射。这样做没有任何意义,所以我希望他们尽快改变。你看 http:/www.quirksmode.orgblogarchives200909the_html5_drag.html
我发现,我需要将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()">
能否禁用图像上所有的鼠标拖动事件?
$('img').on('mousedown', function(){
return false;
});
你需要使用 拖动启动 事件,并防止默认行为。这适用于所有现代浏览器。
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">