Question

我有一个选择DISABLED的元素：

<div id="text" onmousedown="selectionStart();" onmouseup="selectionEnd();">
    Stuff Here
</div>

我想要做的是在用户尝试使用用户在其中选择的值的文本上创建一个div（因此看起来它正在被突出显示）。选择完成后，用户可以毫无问题地拖动此div。

我的selectionStart（）代码基本上是设置鼠标所在位置的X位置（以及绘制DIV元素的Y位置）。

我的selectionEnd（）代码是获取最终的X和Y位置并执行innerHTML的子字符串。

想法是获得单个字符宽度并继续 - 这是一种可行的方法吗？

更新：
我现在可以得到确切的字符选择，现在我需要做的就是在所选区域上创建一个div（具有不透明度/透明度）。

    function selectionStart()
    {
        if (characterWidth == 0)
        {
            widthCalc = document.getElementById("text");
            var storedValue = widthCalc.innerText;
            widthCalc.innerText = 'X';
            var range = document.body.createTextRange();
            range.moveToElementText(widthCalc);
            range.select();
            var caretPos = document.selection.createRange();
            caretPos.select();
            caretPos.findText("X");
            characterWidth = caretPos.boundingWidth;   
            widthCalc.innerText = storedValue;      
        }
        startPositionX = Math.round((mouseX(event)+5)/characterWidth);
        startPositionY = mouseY(event);
    }

    function selectionEnd()
    {
        endPositionX = Math.round((mouseX(event)+5)/characterWidth);
        endPositionY = mouseY(event);
        var myRulerText = document.getElementById("text");
        newSquare = document.createElement('div');
        newSquare.setAttribute('id', 'newSquare')
        newSquare.innerText =  myRulerText.innerText;

        if ((startPositionX - endPositionX) > 0)
        {
            transferBox = startPositionX;
            startPositionX = endPositionX;
            endPositionX = transferBox;
        }

        newSquare.innerText =  newSquare.innerText.substring(startPositionX-2,endPositionX-1);
        newSquare.style.left = 50;
        newSquare.style.top = 100;
        alert(newSquare.innerText);
    }

Answer 1

这是一个很棒的 Tut ，用于选择文字

<强> http://davidwalsh.name/text-selection-ajax

如何从用户选择中获取div中的文本

1 个答案: