ContentEditable DIV - 禁用拖放操作

是否可以在contentEditable屬性設置爲true的元素上禁用拖放功能。ContentEditable DIV - 禁用拖放操作

我有以下的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，它被複制

來源

2010-06-13 sonofdelphi

有趣的是，我不（與標題和單擊處理一起）不知道拖放界面是否足夠確定，但看起來這裏有一些bug。我修改你的代碼稍微對可編輯的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阿爾法：如果我拖動到文本的事件觸發中間的圖像，我收到警報，return false停止丟棄的圖像。但是，如果我拖動到文本的開頭，事件不會觸發，但圖像會插入到div內。請注意，在Firefox 3.6和Chromium 6.0中，事件根本不會觸發，所以要麼我完全誤解了它的工作原理，要麼現在沒有任何工作可以依賴。

來源

2010-06-16 22:07:27 robertc

在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

來源

2010-06-26 18:58:43 Na7coldwater

下面的代碼片段會阻止你的DIV從接收拖動的內容：

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

我（and several others）發現這個API是奇怪和反直覺的，但它確實防止CONTENTEDITABLE從接收拖動的內容除IE8以外的所有瀏覽器（包括IE9 beta）。到目前爲止，我無法阻止IE8接受contenteditable。

我會更新此答案，如果我找到一種方法來這樣做。

來源

2010-10-13 18:49:32 brad

這並不適用於FF /鉻 – 2012-12-12 20:00:27

工作曾在Chrome瀏覽器我。 – user984003 2013-06-29 09:50:17

防止dragover對FF/Chrome @ Mac沒有任何影響。防止掉落。 – Reinmar 2014-06-30 12:04:11

是否可以禁用圖像上的所有mousedown事件？

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

來源

2013-09-25 14:01:53 Dries

我發現我需要爲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()">

來源

2015-04-02 07:29:49

ContentEditable DIV - 禁用拖放操作

回答

相關問題