如何複製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>