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/

捕获坐标并在其上显示div

1 个答案: