javascript - 我怎样才能最好地使内联跨度在一段文本中可拖动？

Question

我有一段文字，用户可以在其中放置一个“图钉”来标记一个位置。放置图钉后，我想允许用户通过将其拖动到段落中的新位置来移动其位置。这对 block 元素来说很简单，但我还没有看到用内联元素来做的好方法。我怎样才能做到这一点？

我已经使用 window.selection 作为一种在段落中查找光标位置的方法来实现它，但它并不像我想要的那样流畅。

请注意，我使用的是 Rangy库来包装 native 范围和选择功能，但它的工作方式与 native 函数相同。

代码如下:

$(document).on("mousedown", '.pin', function () {
    //define what a pin is
    var el = document.createElement("span");
    el.className = "pin";
    el.id = "test";
    //make it contain an empty space so we can color it
    el.appendChild(document.createTextNode("d"));
    $(document).on("mousemove", function () {
        //get the current selection
        var selection = rangy.getSelection();
        //collapse the selection to either the front
        //or back, since we do not want the user to see it.
        if (selection.isBackwards()) {
            selection.collapseToStart();
        } else {
            selection.collapseToEnd();
        }
        //remove the old pin
        $('.pin').remove();
        //place the new pin at the current selection
        selection.getAllRanges()[0].insertNode(el);
    });
    //remove the handler when the user has stopped dragging it
    $(document).on("mouseup", function () {
        $(document).off("mousemove");
    });
});

这是一个工作演示:http://jsfiddle.net/j1LLmr5b/22/ .

如您所见，它(通常)有效，但用户可以看到所做的选择。关于如何在不显示选择突出显示的情况下移动跨度有什么想法吗？我还将接受一种完全不使用选择的替代方法。目标是尽可能干净地移动跨度。

Answer 1

您可以使用范围而不是使用类似于 this answer 的代码来执行此操作.不幸的是，代码比理想的要长一些，因为 IE 尚未实现 document.caretPositionFromPoint()。但是，旧专有 TextRange对象，仍然存在于 IE 11 中，来拯救。

这是一个演示:

http://jsfiddle.net/j1LLmr5b/26/

相关代码如下:

var range, textRange, x = e.clientX, y = e.clientY;

//remove the old pin
$('.pin').remove();

// Try the standards-based way first
if (document.caretPositionFromPoint) {
    var pos = document.caretPositionFromPoint(x, y);
    range = document.createRange();
    range.setStart(pos.offsetNode, pos.offset);
    range.collapse();
}
// Next, the WebKit way
else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(x, y);
}
// Finally, the IE way
else if (document.body.createTextRange) {
    textRange = document.body.createTextRange();
    textRange.moveToPoint(x, y);
    var spanId = "temp_" + ("" + Math.random()).slice(2);
    textRange.pasteHTML('<span id="' + spanId + '">&nbsp;</span>');
    var span = document.getElementById(spanId);
    //place the new pin
    span.parentNode.replaceChild(el, span);
}
if (range) {
    //place the new pin
    range.insertNode(el);
}