当用户拖动鼠标时,我想在文本选择的初始或终端角上绝对定位div.不幸的是,Range只提供索引位置,而不是x/y坐标.我认为可能有一种方法可以使用range.insertNode,但仅限于一方.(这也可能有助于某人在满足的情况下定位一个自动完成的盒子.)
如何获取文本选择或文本光标的x/y坐标？
在chrome/webkit中工作,在最后选择的字母后面定位div.通常.
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var $div;
var last;
function find() {
var selection = window.getSelection();
var text = selection.toString();
if (last==text) return; else last=text; // prevent needless computations if no changes to selection
if (selection.rangeCount==0) return;
var range = selection.getRangeAt(0);
var $span= $("<span/>");
newRange = document.createRange();
newRange.setStart(selection.focusNode, range.endOffset);
newRange.insertNode($span[0]); // using 'range' here instead of newRange unselects or causes flicker on chrome/webkit
var x = $span.offset().left;
var y = $span.offset().top;
$div.text(x+" "+y);
$div.css({left:x,top:y+($div.height())});
$span.remove();
}
$(window).load(function() {
$("body").keydown(function(e) {
//find();
setTimeout(find,0);
});
$("body").mousemove(function(e) {
//find();
setTimeout(find,0);
});
$div=$("<div style='border:1px solid red;background:white; position:absolute;'>").appendTo($("body"));
});
</script>
</head>
<body><p>the quick brown fox</p><ul><li>jumps <i>over</i></li></ul><p>the lazy dog</p></body>
</html>