jquery - 如何保留子 div 相对于其容器的偏移量

Question

我正在尝试使用 jQuery 和 Bootstrap 2.3 实现 map 。

所以有一个 map 图像包裹着一个名为 container 的容器 div 以及另一个作为位置选择器的可拖动 div:

    <div class="row-fluid margin-bottom-10">
        <div class="span12">
            <div class="span6 center">
                <div id="mapContainer" class="relative">
                    @this.Html.HiddenFor(model => model.Location.MapPositionLeft)
                    @this.Html.HiddenFor(model => model.Location.MapPositionTop)
                    <img id="mapImage" src="~/Content/Images/Visitors/map.png" />
                    <div id="mapPicker" class="draggable mapPicker absolute"><i class="icon-map-marker"></i></div>
                </div>
            </div>
        </div>
    </div>

这是我的js: initiateMapPicker: 函数 () {

        var mapPicker = $("#mapPicker");
        var mapContainer = $("#mapContainer");

        if (mapContainer.length == 0)
            return;

        var top = eval($('input[type="hidden"][name="Location.MapPositionTop"]').val());
        var left = eval($('input[type="hidden"][name="Location.MapPositionLeft"]').val());

        if (!top && !left) {
            top = 0;
            left = 0;
        }

        mapPicker.draggable({
            containment: "parent",
            stop: function () {
                // Get new position
                var position = $(this).position();
                $('input[type="hidden"][name="Location.MapPositionLeft"]').val(position.left);
                $('input[type="hidden"][name="Location.MapPositionTop"]').val(position.top);
            }
        // assign saved position
        }).offset({ top: mapContainer.offset().top + top, left: mapContainer.offset().left + left });
    },

嗯，好用!但是:在调整窗口大小时，一切都崩溃了。

如何相对于容器定位拾取器并根据图像大小保留拾取器的位置？

Answer 1

查看 draggable() 的文档，您需要指定一个容器选择器，而不仅仅是“parent”..所以像这样:

mapPicker.draggable({ containment: "#mapContainer", ... })

此外，请确保您的#mapContainer 具有静态(相对或绝对)以外的 CSS 位置，以确保子项的任何 CSS 偏移量以预期方式应用，相对 #mapContainer 而不是其他一些 div 或 body。

希望这对您有所帮助!