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要求，我无法使用textarea。

有没有人知道如何解决这个问题？

提前致谢

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/

jQuery中的jQuery拖放字符串

1 个答案: