放置时如何获取可拖动项目的相对位置？

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的位置。 我如何获得他们的相对位置？

编辑->这是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' } );

请记住，containment元素（在本例中为parent ）可能不适用于某些选择器。

从文档中：

限制拖动到指定元素或区域的范围内。 可能的字符串值：“父”，“文档”，“窗口”，[x1，y1，x2，y2]。

有关更多信息，请参见jQuery UI文档。

Answer 2

给出父div position: relative 。

#screen {
    position: relative;
    ...
}

放置时如何获取可拖动项目的相对位置？

问题描述

2 个解决方案

解决方案1
0 2011-09-02 05:55:48

解决方案2
0 已采纳 2011-09-02 06:14:33

放置时如何获取可拖动项目的相对位置？

问题描述

2 个解决方案

解决方案1 0 2011-09-02 05:55:48

解决方案2 0 已采纳 2011-09-02 06:14:33

解决方案1
0 2011-09-02 05:55:48

解决方案2
0 已采纳 2011-09-02 06:14:33