Question

我有以下内容：

    $(function() {
    // Make images draggable.
    $(".item").draggable({

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    }

    });
});

当我放下它时，这将得到项目的位置，但它是相对于浏览器窗口，而不是它们所在的div。我怎样才能得到他们的相对位置？

编辑 - ＆GT;这是html / css：

<style type="text/css">

.container {
    margin-top: 50px;
    cursor:move;
}
#screen {
    overflow:hidden;
    width:500px;
    height:500px;
    clear:both;
    border:1px solid black;
}                              

</style>

<body>

<div class="container">

    <div id="screen">
      <img id="productid_1" src="images/KeypadLinc OFF.jpg" class="item" alt="" title="" />
      <img id="productid_2" src="images/KeypadLinc ON.jpg" class="item" alt="" title="" />
    </div>

</div>


<div id="stop">Waiting image getting dropped...</div>
</body>

Answer 1

设置包含属性。例如：

$(".item").draggable( { containment: 'parent' } );

请注意，包含元素（在本例中为parent）可能不适用于某些选择器。

来自文档：

约束拖动到指定元素的范围内或区域。可能的字符串值：＆＃39; parent＆＃39;，＆＃39; document＆＃39;，＆＃39; window＆＃39;，[x1， y1，x2，y2]。

有关详细信息，请参阅jQuery UI Documentation。

Answer 2

给父div position: relative。

#screen {
    position: relative;
    ...
}

如何在掉落时获得可拖动物品的相对位置？

2 个答案: