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

Question

I have the following: 我有以下几点：

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

    });
});

This will get the position of the item when I drop it, but it is relative to the browser window, not the div they are within. 当我放下它时，它将获得该项目的位置，但是它是相对于浏览器窗口的，而不是它们所在的div的位置。 How can I get their relative position? 我如何获得他们的相对位置？

edit-> Here is the html/css: 编辑->这是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

Set the containment attribute. 设置包含属性。 For example: 例如：

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

Keep in mind that the containment element (in this case parent ) may not work with certain selectors. 请记住，containment元素（在本例中为parent ）可能不适用于某些选择器。

From the documentation: 从文档中：

Constrains dragging to within the bounds of the specified element or region. 限制拖动到指定元素或区域的范围内。 Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2]. 可能的字符串值：“父”，“文档”，“窗口”，[x1，y1，x2，y2]。

See the jQuery UI Documentation for more information. 有关更多信息，请参见jQuery UI文档。

Answer 2

Give the parent div position: relative . 给出父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