可信的div中的HTML5可拖动元素 – 在第一次掉落后停止工作 – 为什么？

我正在尝试创建一些可拖动的元素（标记），可以在一个可信的div中拖动。 似乎一切都在工作，除了……在我拖动一个元素然后放下它之后，我再也无法拖动它了。 似乎我再也无法绑定它的dragstart事件了。

知道为什么会这样，我该如何解决？

这是我小提琴的链接： http ： //jsfiddle.net/gXScu/1/

HTML：

 Testime siinkohal seda, et kuidas
 on võimalik asja testida. Token 
 Token 2 

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有一个错误（不出意外 – 所有浏览器中最容易出错的function）。 您的代码在Firefox上运行得非常好，但由于某些原因，无法再拖动使用insertHTML命令插入到editable中的元素。

我尝试了几个黑客，但只有一个工作 – 插入其他元素，然后更换它。

所以与其：

 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, '\u200b'); // Replace that span with our dragged content. $('#' + spanId).replaceWith(content); 

你可以在这里试试： http ： //jsfiddle.net/gXScu/5/ 。 我也纠正了错误的顺序：

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