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>