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容器的座標

回答

相關問題