10

contenteditable div内でドラッグできるいくつかのドラッグ可能な要素(トークン)を作成しようとしています。それを除いて、すべてが機能しているようです... 1 つの要素をドラッグしてドロップした後、再度ドラッグすることはできません。再びドラッグスタートイベントにバインドできないようです。

なぜこれが起こるのか、どうすれば修正できますか？

ここに私のフィドルへのリンクがあります：http://jsfiddle.net/gXScu/1/

HTML:

<div id="editor" contenteditable="true">
    Testime siinkohal seda, et kuidas<br />
    on võimalik asja testida.
    <span class="draggable" draggable="true" contenteditable="false">Token</span>
</div>
<span class="draggable" draggable="true" contenteditable="false">Token 2</span>

Javascript (jQuery)

var bindDraggables = function() {
    console.log('binding draggables', $('.draggable').length);
    $('.draggable').off('dragstart').on('dragstart', function(e) {
        if (!e.target.id)
            e.target.id = (new Date()).getTime();
        e.originalEvent.dataTransfer.setData('text/html', e.target.outerHTML);
        console.log('started dragging');
        $(e.target).addClass('dragged');
    }).on('click', function() {
        console.log('there was a click');
    });
}

$('#editor').on('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#editor').on('drop', function(e) {
    e.preventDefault();
    var e = e.originalEvent;
    var content = e.dataTransfer.getData('text/html');
    var range = null;
  if (document.caretRangeFromPoint) { // Chrome
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
  }
  else if (e.rangeParent) { // Firefox
    range = document.createRange();
        range.setStart(e.rangeParent, e.rangeOffset);
  }
    console.log('range', range)
  var sel = window.getSelection();
  sel.removeAllRanges(); sel.addRange(range);

  $('#editor').get(0).focus(); // essential
  document.execCommand('insertHTML',false, content);
    //$('#editor').append(content);
  sel.removeAllRanges();
    bindDraggables();
    console.log($('[dragged="dragged"]').length);
    $('.dragged').remove();
});

bindDraggables();

CSS:

#editor {
    border: 2px solid red;
    padding: 5px;
}
.draggable {
    display: inline-block;
    padding: 3px;
    background: yellow;
    cursor: move !important;
}
4

2 に答える 2

9

私もいくつかのハックを試しましたが、どれもうまくいかないようです。私は HTML を調べていましたが、あなたの例では、新しく挿入されたコンテンツにcontenteditable属性が割り当てられておらず、手動で割り当てたときに正常に動作し始めたことがわかりました。

ここに私のコードがありますhttp://jsfiddle.net/gXScu/8/

この行を追加しました

$('.draggable').attr("contenteditable", false);bindDraggablesメソッドで。

contenteditableに関する Reinmar の説明に同意します。

于 2013-06-03T19:19:04.260 に答える