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

Интересно, я не Не знаю интерфейса перетаскивания, чтобы быть уверенным, но похоже, что здесь есть какая-то ошибка. Я немного изменил свой код, чтобы добавить обработчик для события перетаскивания на редактируемой 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 событие вообще не срабатывает, так что либо я полностью неправильно понял, как это работает, либо ничто из этого не работает достаточно хорошо, чтобы полагаться на это сейчас.

источник

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; 
});

I (and several others) найти эту апи быть странными и нелогичными, но это предотвратить contenteditable от получения тащил контент во всех браузерах, кроме IE8 (включая IE9 beta). На данный момент я не могу помешать IE8 принимать контент-контент.

Я обновлю этот ответ, если найду способ сделать это.

источник

2010-10-13 18:49:32 brad

Это не работает для FF/Chrome –

работал в Chrome для меня. – user984003

Предотвращение dragover не влияет на меня на FF/Chrome @ Mac. Предотвращение падения не происходит. – Reinmar

Можно ли отключить все события mousedown на изображении?

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

источник

2013-09-25 14:01:53 Dries

Я обнаружил, что мне нужно, чтобы установить dropEffect к «ни» для обоих 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()">

источник

2015-04-02 07:29:49

ContentEditable DIV - отключение перетаскивания

ответ

Смежные вопросы