Кроссбраузерный метод для отмены события удаления в редактируемом элементе содержимого - PullRequest
Новая
       28

Кроссбраузерный метод для отмены события удаления в редактируемом элементе содержимого

3 голосов
/ 23 ноября 2010

Я хочу, чтобы изображения (и другие материалы) не помещались в редактируемый контент для разных браузеров. Я вижу, как это сделать для Chrome и IE. Firefox упорно отказывается. Фрагмент кода в http://jsbin.com/oqozo3 содержит пример, который показывает, что событие запускается, я отменяю его, а в FF изображение все еще появляется.

В основном, следующее не работает в FF 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ContentEditable fails in FF</title>
<script type="text/javascript">
function init() {
  var target = document.getElementById("target");
  if (target.addEventListener) {
    target.addEventListener ("dragenter", all, false);
    target.addEventListener ("dragover", all, false);
    target.addEventListener ("drop", all, false);    
    target.addEventListener ("dragdrop", all, false);
  } else {
    target.attachEvent ("ondragenter", all, false);
    target.attachEvent ("ondragover", all, false);
    target.attachEvent ("ondrop", all, false);    
  }
}
function all(event) {
if (event.preventDefault) { event.preventDefault();} 
return false;
}
</script>
</head>
<body onLoad="init();">
    <div id="target" style="border: 1px solid black; height: 100px;" contenteditable="true">This is editable content</div>
    <div>
     <p>I don't want the image to be draggable to the above div. Works in IE,
     Chrome, not firefox.</p>
     <img src="http://mozcom-cdn.mozilla.net/img/firefox-100.jpg">
    </div>
</body>
</html>

Я уже посмотрел: ContentEditable DIV - отключение перетаскивания , но предложения там также не работают в Firefox.

1 Ответ

0 голосов
/ 23 ноября 2010

любая причина, по которой вы не используете фреймворк, такой как jQuery, он делает такие вещи, как это, кросс-браузер

...