son*_*phi 15 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中并将其复制(与标题和点击处理程序一起)
bra*_*rad 29
以下代码段将阻止您的div接收拖动的内容:
jQuery('div').bind('dragover drop', function(event){
event.preventDefault();
return false;
});
我(以及其他几个人)发现这个api很奇怪并且反直觉,但它确实阻止了在IE8(包括IE9 beta)之外的所有浏览器中接收拖动的内容.到目前为止,我无法阻止IE8接受contenteditable.
如果我找到一种方法,我会更新这个答案.
我发现我需要将 dropEffect 设置为“none”，以便 Dragenter 和 Dragover 拒绝拖动。如果不绑定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()">有趣的是，我不太了解拖放界面，无法确定，但看起来这里存在某种错误。我稍微修改了您的代码，为可编辑 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 中，该事件根本不会触发，所以要么我完全误解了它的工作原理，要么它现在都运行得不够好，值得依赖。
| 归档时间： |
|
| 查看次数： |
14989 次 |
| 最近记录： |