How do I duplicate Facebook picture tagging functionality?

Question

I asked this question in another post - http://stackoverflow.com/questions/2597773/how-do-i-put-a-div-box-around-my-cursor-on-click

I got a wonderful answer. See the code below:

<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>

The issue I am having is that when I implement this snippet, on every click a box appears and stays there. So if I click on the image 10 times, I get 10 boxes. How do I get the previous box to disappear once I click somewhere else (i.e. have the box move to another place on the image (just like with Facebook Picture Tagging))?

Thanks.

Answer 1

try this:

<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>