javascript - JavaScript: 選択マーカーをドラッグして、現在の選択範囲を拡大または縮小できます

Question

次の作業コードがあります: http://jsfiddle.net/henrichro/Z75wS/

ユーザーがテキストを選択すると、たとえば iPhone と同じように、左右のマーカーが表示されます。後ろ向きでも選択可能です。コードは主にここにあるソリューションに基づいて構築されましたhttps://stackoverflow.com/a/15369695/621639、もちろん少し変更し、jQueryをJSに変換しました。私の主な目標は、すべてをJavaScriptで書くことです。任意のライブラリを使用します。

必要なのは、マーカーをドラッグ可能にして、選択範囲を拡大または縮小できるようにすることです。

現在の JavaScript コード:

function applySelectionMarkers() {

    if( !window.getSelection().isCollapsed ) {

        var sel = window.getSelection();
        var range = document.createRange();
        range.setStart( sel.anchorNode, sel.anchorOffset );
        range.setEnd( sel.focusNode, sel.focusOffset );
        var backwards = range.collapsed;
        range.detach();

        var rects = sel.getRangeAt(0).getClientRects();
        var n = rects.length - 1;

        //console.log(rects);

        var lineHeight = getLineHeight( edit );

        var markerRight = document.getElementById( "markerRight" );
        var markerRightWidth = markerRight.offsetWidth;

        var markerLeft = document.getElementById( "markerLeft" );
        var markerLeftWidth = markerLeft.offsetWidth;


        if ( markerRightWidth == 0 ) {
            markerRightWidth = 10;
        }

        if ( markerLeftWidth == 0 ) {
            markerLeftWidth = 10;
        }

        if ( lastCharRTL( getSelectionHtml() ) ) {

            markerLeft.style.top = ( rects[0].top + lineHeight ) + "px";
            markerLeft.style.left = ( rects[0].left - markerLeftWidth ) + "px";
            markerLeft.style.display = "block";

            markerRight.style.top = ( rects[n].top + lineHeight ) + "px";
            markerRight.style.left = ( rects[n].left - markerRightWidth ) + "px";
            markerRight.style.display = "block";

            //alert( "one" + markerLeftWidth );

        } else if ( backwards ) {

            markerLeft.style.top = ( rects[n].top + lineHeight ) + "px";
            markerLeft.style.left = rects[n].right + "px";
            markerLeft.style.display = "block";

            markerRight.style.top = ( rects[0].top + lineHeight ) + "px";
            markerRight.style.left = ( rects[0].left - markerRightWidth ) + "px";
            markerRight.style.display = "block";

            //alert( "two" + markerRightWidth );

        } else {

            markerLeft.style.top = ( rects[0].top + lineHeight ) + "px";
            markerLeft.style.left = ( rects[0].left - markerLeftWidth ) + "px";
            markerLeft.style.display = "block";

            markerRight.style.top = ( rects[n].top + lineHeight ) + "px";
            markerRight.style.left = rects[n].right + "px";
            markerRight.style.display = "block";

            //alert( "three" + markerLeftWidth );
        }
    } else {
        markerLeft.style.display = "none";
        markerRight.style.display = "none";
    }
}

function getSelectionHtml() {
    var html = "";
    if ( typeof window.getSelection != "undefined" ) {
        var sel = window.getSelection();
        if ( sel.rangeCount ) {
            var container = document.createElement( "div" );
            for ( var i = 0, len = sel.rangeCount; i < len; ++i ) {
                container.appendChild( sel.getRangeAt(i).cloneContents() );
            }
            html = container.innerHTML;
        }
    } else if ( typeof document.selection != "undefined" ) {
        if ( document.selection.type == "Text" ) {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

function lastCharRTL( txt ) {
    return /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]$/.test(txt);
}

// line height in selectie ca putem adauga la markerLeft top attribute
function getLineHeight( element ){
    var temp = document.createElement( element.nodeName );
    temp.setAttribute( "style","margin:0px;padding:0px;font-family:"+element.style.fontFamily+";font-size:"+element.style.fontSize );
    temp.innerHTML = "test";
    temp = element.parentNode.appendChild( temp );
    var ret = temp.clientHeight;
    temp.parentNode.removeChild( temp );
    return ret;
}

document.onmouseup = function() {
    applySelectionMarkers();
}

function KeyPress(e) {
    var evtobj = window.event ? event : e;
    if ( evtobj.keyCode == 65 && evtobj.ctrlKey ) {
        console.log(evtobj.keyCode);
        applySelectionMarkers();
    }
}

document.onkeydown = KeyPress;

その他のクレジット:

https://stackoverflow.com/a/5222955/621639、 https://stackoverflow.com/a/4515470/621639

更新：マーカーの1つをドラッグしながら再生：

window.onload = function() {
    draggable( 'markerLeft' );
}

var dragObj = null;

function draggable( id ) {
    var obj = document.getElementById( id );
    obj.style.position = "absolute";
    obj.onmousedown = function() {
        dragObj = obj;
    }
}

document.onmouseup = function(e) {
    dragObj = null;
}

document.onmousemove = function(e) {
    var x = e.pageX;
    var y = e.pageY;
    if( dragObj == null )
        return;
    dragObj.style.left = x + "px";
    dragObj.style.top = y + "px";
}

しかし、左のマーカー (赤) をドラッグすると、選択範囲全体が消えます。