如何保留子div相對於其容器的偏移量

我試圖使用jQuery和Bootstrap 2.3實現一個地圖。如何保留子div相對於其容器的偏移量

因此，有一個叫容器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 }); 
    },

好吧，它的工作原理！但是：在窗口調整大小時，一切都會崩潰。

如何根據圖像大小將拾取器相對於容器放置並保存拾取器的位置？

來源

2013-12-09 Reza Owliaei

看的可拖動（）的文件，你需要指定一個容器選擇，而不僅僅是「父母」 ..所以像：

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

此外，請確保您的#mapContainer有一個CSS除了靜態（相對或絕對）之外的位置，以確保任何CSS子偏移量以預期的方式應用，相對#mapContainer而不是其他的div或body。

希望這有助於！

來源

2013-12-09 16:44:14 chrisgonzalez

如何保留子div相對於其容器的偏移量

回答

相關問題