捕获坐标并在其上显示div

Question

我有一个主div，我想在坐标上放置一些更多的div，当我单击它时，它会被捕获。它工作得很好，它改变了div的顶部和左侧位置，但问题是，当我再次单击主div时，它会拖动第一次单击时已经显示的div。我希望第一次单击时显示的div在我再次单击主div时停止移动。真的很感谢你的帮助。

代码：

    $(document).ready(function(){
    $("#main_div").click(function(event, ui){

    var x = event.pageX-document.getElementById("main_div").offsetLeft;
    var y = event.pageY-document.getElementById("main_div").offsetTop;

    document.pointform.form_x.value = x;
    document.pointform.form_y.value = y;


    $("#container-5").css({"top":y,"left":x});
    $("#EDate").css({"top":y,"left":x});

 });
 });

Answer 1

如果只想删除事件处理程序，可以使用unbind()方法：

$(document).ready(function(){
    $("#main_div").click(function(event, ui){

    var x = event.pageX-document.getElementById("main_div").offsetLeft;
    var y = event.pageY-document.getElementById("main_div").offsetTop;

    document.pointform.form_x.value = x;
    document.pointform.form_y.value = y;


    $("#container-5").css({"top":y,"left":x});
    $("#EDate").css({"top":y,"left":x});

    // and here we unbind it
    $(this).unbind('click');

   });
});

根据您的评论：

$(document).ready(function(){
    $("body").click(function(event, ui){
    var i = 0;
    if($(this).data("index"))
      i = $(this).data("index");
    else
      $(this).data("index", i = 0);

    var x = event.clientX;
    var y = event.clientY;


    if($("#container-" + i)[0])
        $("#container-" + i).css({"top":y,"left":x});
    else
        $(this).unbind("click");


    $(this).data("index",i+1);


   });
});​

演示：http://jsfiddle.net/Sn9Xx/show

来源：http://jsfiddle.net/Sn9Xx/