可信的div中的HTML5可拖動元素 - 在第一次掉落后停止工作 - 為什么？

Question

我正在嘗試創建一些可拖動的元素（標記），可以在一個可疑的div內拖動。 似乎一切都在工作，除了......在我拖動一個元素然后放下它之后，我再也無法拖動它了。 似乎我再也無法綁定它的dragstart事件了。

知道為什么會這樣，我該如何解決？

這是我小提琴的鏈接： 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;
}

Answer 1

我也嘗試了一些黑客，但似乎沒有一個工作。 我正在檢查HTML，我發現在你的例子中，新插入的內容沒有分配任何contenteditable屬性，當我手動分配它時，它開始工作正常。

這是我的代碼http://jsfiddle.net/gXScu/8/

我剛添加了這一行

$('.draggable').attr("contenteditable", false); 在bindDraggables方法中。

我同意Reinmar關於滿足的解釋。

Answer 2

顯然，Chrome瀏覽器有一個bug（不是一個驚喜- contenteditable是在所有瀏覽器中最車功能）。 您的代碼在Firefox上運行得非常好，但由於某種原因，無法再拖動插入到可編輯的insertHTML命令中的元素。

我嘗試了幾個黑客，但只有一個工作 - 插入其他元素，然后更換它。

所以與其：

document.execCommand('insertHTML', false, content);

使用這樣的東西：

var spanId = 'temp-' + (new Date()).getTime();

// Insert span with zero-width space (so it isn't visible and it isn't empty).
document.execCommand('insertHTML', false, '<span id="' + spanId + '">\u200b</span>');
// Replace that span with our dragged content.
$('#' + spanId).replaceWith(content);

你可以在這里試試： http ： //jsfiddle.net/gXScu/5/ 。 我還糾正了錯誤的順序：

$('.dragged').remove();
bindDraggables();