div 내의 드래그 앤 드롭 문자열

Question

동일한 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 요구 사항으로 인해 텍스트 영역을 사용할 수 없습니다.

누구나 해결 방법에 대한 아이디어가 있습니까? 사전

Answer 1

에서

덕분에

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; 
}); 

function getSelectionCharOffsetsWithin(element) { 
    var start = 0, end = 0; 
    var sel, range, priorRange; 
    if (typeof window.getSelection != "undefined") { 
     range = window.getSelection().getRangeAt(0); 
     priorRange = range.cloneRange(); 
     priorRange.selectNodeContents(element); 
     priorRange.setEnd(range.startContainer, range.startOffset); 
     start = priorRange.toString().length; 
     end = start + range.toString().length; 
    } else if (typeof document.selection != "undefined" && 
      (sel = document.selection).type != "Control") { 
     range = sel.createRange(); 
     priorRange = document.body.createTextRange(); 
     priorRange.moveToElementText(element); 
     priorRange.setEndPoint("EndToStart", range); 
     start = priorRange.text.length; 
     end = start + range.text.length; 
    } 
    return { 
     start: start, 
     end: end 
    }; 
} 

var startPos = 0; 
var endPos = 0; 

$('#editor').on('mouseup', function(e) { 
    startPos = getSelectionCharOffsetsWithin(this).start); 
    endPos = getSelectionCharOffsetsWithin(this).end); 
}); 



$('#editor').on('drop', function(e) { 
    $(this).text($(this).text().slice(starPos,endPos)); 
    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); 
    } 
    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(); 

    bindDraggables(); 
}); 

bindDraggables(); 

http://jsfiddle.net/gXScu/178/

를 해결