Question

这个demo显示了在使用jQuery拖动组件时如何发送事件。我在DIV中有一个组件，当我拖动该组件时，我想打印组件 relative 的坐标到DIV容器，任何jQuery pro都可以帮助我在这里这是我到目前为止所得到的。

<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;
});

但我不确定如何将它们组合在一起。

Answer 1

喜欢这个吗？

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);
        }
    });
});

Answer 2

您可能想要做的是将父容器CSS设置为'position：relative'，将'draggable item'设置为'position：absolute'。然后，使用$（this）.position（）。left / top之类的东西将相对于父容器。

见这里：http://jsfiddle.net/bTULc/1/

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

2 个答案: