jQuery-UI Draggable：打印出相对于DIV容器的坐标

demo这个demo显示了在使用jQuery拖动组件时如何发送事件。我在DIV中有一个组件，当我拖动该组件时，我想将组件相对于的坐标打印到DIV容器，任何jQuery pro都可以帮助我。这是我到目前为止。jQuery-UI Draggable：打印出相对于DIV容器的坐标

<div id="container" style="width: 400px; height: 4000px; border: 1px solid black;" > 
    <div id="draggable" style="width: 150px; height: 150px; background-color: black; cursor: move;"> 
     <div class="count"/>    
    </div> 
</div> 
<script>    
    jQuery(function(){         
     jQuery("#draggable").draggable({ 
      containment: "#contain", 
      scroll: false, 
      drag: function(){ 

      } 
     }); 
     function updateCoordinate(newCoordinate){ 
      jQuery(".count").text(newCoordinate); 
     } 
    }); 
</script>

在对阻力回调事件，我需要弄清楚pageX, pageY还有offsetX, offsetY找出组件的相对位置，当我拖累。我对jQuery非常陌生。我知道我可以得到两个pageX, pageY和offsetX, offsetY这样

jQuery("#container").click(function(event){ 
    var offset = jQuery(this).offset(); 
    var pageX = event.pageX; 
    var pageY = event.pageY; 
});

，但我不知道如何将它们结合在一起。

来源

2011-05-02 Thang Pham

是否这样？

http://jsfiddle.net/aasFx/36/

$(function() { 
    $("#draggable").draggable({ 
     containment: "#contain", 
     scroll: false, 
     drag: function() { 
      var $this = $(this); 
      var thisPos = $this.position(); 
      var parentPos = $this.parent().position(); 

      var x = thisPos.left - parentPos.left; 
      var y = thisPos.top - parentPos.top; 

      $this.text(x + ", " + y); 
     } 
    }); 
});

来源

2011-05-02 20:04:16

非常感谢。看看'drowe'解决方案。我认为它非常干净。 – 2011-05-02 20:16:30

什么，你可能想要做的是设置父容器的CSS的立场：相对“，和“拖动项目”到“的位置是：绝对”。然后，使用诸如$（this）.position（）。left/top之类的东西将相对于父容器。

请看这里：http://jsfiddle.net/bTULc/1/

来源

2011-05-02 20:09:16 drowe

我很喜欢你的解决方案，但是'kingjiv'先回答了，所以我必须接受他的回答。顺便说一句，非常感谢你。 +1 – 2011-05-02 20:15:47

jQuery-UI Draggable：打印出相对于DIV容器的坐标

回答

相关问题