0
私は同じdiv内でドラッグ&ドロップする必要がある、テキスト付きのdivを持っています。div内のドラッグ&ドロップ文字列
私はこれまでのところ、これを持っている:
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');
});
}
$('#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;
var startTrim = 0;
var endTrim = 0;
if (document.caretRangeFromPoint) { // Chrome
range = document.caretRangeFromPoint(e.clientX, e.clientY);
console.log(range.getBoundingClientRect());
}
else if (e.rangeParent) { // Firefox
range = document.createRange();
range.setStart(e.rangeParent, e.rangeOffset);
}
var sel = window.getSelection();
sel.removeAllRanges(); sel.addRange(range);
$('#editor').get(0).focus(); // essential
var spanId = 'temp-' + (new Date()).getTime();
document.execCommand('insertHTML', false, '<span id="' + spanId + '">\u200b</span>');
$('#' + spanId).replaceWith(content);
sel.removeAllRanges();
$('.dragged').remove();
console.log($(this).text());
bindDraggables();
});
bindDraggables();
<div id="editor" contenteditable="true">
First Second Third Fourth Fifth Sixth
</div>
#editor {
border: 2px solid red;
padding: 5px;
}
http://jsfiddle.net/gXScu/175/
私が午前問題は、テキストが移動していない、コピーされるということです。
注:編集可能/編集不可能なコンテンツ、追加のCSSおよびjQuery要件のために、テキストエリアを使用することはできません。
これを解決する方法はありますか?事前に
おかげ