如何复制Facebook图片标记功能？

Question

我在另一篇文章中提到过这个问题 - How do I put a <div> box around my cursor on click?

我得到了一个很好的答案。请参见下面的代码：

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#image-wrapper").click(function(e){ 
     var ele = $("<div>"); 
     ele.css({width:"50px", height:"50px", border:"1px solid green", position:"absolute", left: e.pageX - 25, top: e.pageY -25}); 
     $("body").append(ele);  
    }); 
    }); 
</script> 

<div id="image-wrapper" style="border: 1px solid red; width: 300px; height: 200px;"> 
</div> 

我遇到的问题是，当我实现这个片段中，每点击出现一个框，并在那里停留。所以如果我点击10次图像，我会得到10个盒子。如果我点击其他地方（即将框移动到图像上的其他位置（就像使用Facebook图片标记一样）），如何让前一个框消失？

谢谢。

Answer 1

试试这个：

<script type="text/javascript"> 
$(function() { 
    var ele = $("<div>").appendTo("body").css({"width":"50px", "height":"50px", "border":"1px solid green", "position":"absolute", "display":"none"});  
    $("#image-wrapper").click(function(e){ 
     ele.css({"left": e.pageX - 25, "top": e.pageY -25, "display":"block"}); 
    }); 
}); 
</script>