ContentEditable DIV - запрещающий перетаскивание

Question

ContentEditable DIV - запрещающий перетаскивание

Действительно ли возможно отключить функциональность перетаскивания на элементах, которые атрибут contentEditable установили на истинный.

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

15

javascript html5 contenteditable

задан amphetamachine 13 June 2010 в 17:20

2 ответа

Другие вопросы по тегам:

javascript html5 contenteditable

Похожие вопросы:

score 3 · Answer 1

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

score 2 · Answer 2

В 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