Question

我正在尝试使用jQuery和Bootstrap 2.3来实现地图。

所以有一个Map图像包含一个名为container的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：function（）{

        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。 / p>

希望这有帮助！

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

1 个答案: