어떻게 사용 안 함 선택을 가진 요소가

Question

사용자 선택에서 사업부에서 텍스트를 얻을 :

<div id="text" onmousedown="selectionStart();" onmouseup="selectionEnd();"> 
    Stuff Here 
</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

여기에 텍스트를

http://davidwalsh.name/text-selection-ajax