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

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

15 голосов
/ 13 июня 2010

Можно ли отключить функцию перетаскивания для элементов, для атрибута 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, и оно копируется (вместе с заголовком и обработчиком щелчка)

Ответы [ 5 ]

28 голосов
/ 13 октября 2010

Следующий фрагмент запретит вашему div-элементу получать перетаскиваемый контент: 

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

Я ( и несколько других ) нахожу этот API странным и нелогичным, но он делаетпредотвратить получение контрагентом перетаскиваемого содержимого во всех браузерах, кроме IE8 (включая бета-версию IE9).На данный момент я не могу помешать IE8 принять приемлемое.

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

3 голосов
/ 17 июня 2010

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

2 голосов
/ 02 апреля 2015

Я обнаружил, что мне нужно установить для 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()">
2 голосов
/ 26 июня 2010

В 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

0 голосов
/ 25 сентября 2013

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

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