컨테이너에 상대적인 자식 div의 오프셋을 유지하는 방법

jQuery 및 부트 스트랩 2.3을 사용하여 맵을 구현하려고합니다.컨테이너에 상대적인 자식 div의 오프셋을 유지하는 방법

그래서 위치 선택기와 같은 다른 드래그 사업부와 함께 컨테이너 사업부라는 이름의 용기와 포장지도 이미지가 : 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 }); 
    },

<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입니다

잘 작동합니다! : 창 크기를 조정하면 모든 것이 고장납니다.

피커를 컨테이너에 상대적으로 배치하고 이미지 크기에 따라 피커의 위치를 유지하려면 어떻게해야합니까? 또한

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

, 당신의 #mapContainer는 CSS가 있는지 확인 :) (드래그에 대한 설명서를 보면

는

출처

2013-12-09 Reza Owliaei

, 그렇게 뭔가처럼 .. 그냥 "부모"컨테이너 선택기를 지정해야 정적 (상대 또는 절대) 이외의 위치를 사용하여 어린이를위한 CSS 오프셋이 예상되는 방식으로 적용되는지, 상대적 #mapContainer 및 다른 div 또는 본문이 아닌지 확인해야합니다.

희망이 도움이됩니다.

출처

2013-12-09 16:44:14 chrisgonzalez

컨테이너에 상대적인 자식 div의 오프셋을 유지하는 방법

답변

관련 문제