1. 홈
  2. 질의 응답
  3. Jquery UI draggable 잘못된 위치 관련 부모 컨테이너

Jquery UI draggable 잘못된 위치 관련 부모 컨테이너

2017-12-14 16 views
0

jquery-ui draggable에 문제가 있습니다. 부모 컨테이너 안에 큰 블록이 있습니다. draggable 블록 안에는 조각 이미지가있는 많은 이미지가 있습니다. 일반적으로 모든지도를 드래그하는 것처럼이 이미지지도를 부모 div 안에 드래그해야합니다. 여기 Jquery UI draggable 잘못된 위치 관련 부모 컨테이너

내 코드입니다 : 나는 당신이 내 문제를 해결할 수 

.map_container { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    height: 900px; 
} 
.map_inner { 

    position: absolute; 
    width: 13000px; 
    height: 12341px; 
    top: 0; 
    left: 0; 

} 
.map_inner img { 
    float: left; 
    border: none; 
    margin: 0; 
    padding: 0; 
}

https://jsfiddle.net/jkrqmsoy/

<div class="map_container"> 
       <div class="map_inner"> 
      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_01.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_02.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_03.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_04.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_05.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_06.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_07.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_08.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_09.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_10.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_11.gif" width="715" height="1228" alt=""> 



      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_12.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_13.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_14.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_15.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_16.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_17.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_18.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_19.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_20.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_21.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_22.gif" width="713" height="1228" alt=""> 



      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_23.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_24.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_25.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_26.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_27.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_28.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_29.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_30.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_31.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_32.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_33.gif" width="713" height="1229" alt=""> 



      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_34.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_35.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_36.gif" width="1228" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_37.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_38.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_39.gif" width="1228" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_40.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_41.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_42.gif" width="1228" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_43.gif" width="1229" height="1230" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_44.gif" width="713" height="1230" alt=""> 
      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_45.gif" width="13000" height="26" alt=""> 


      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_46.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_47.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_48.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_49.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_50.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_51.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_52.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_53.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_54.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_55.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_56.gif" width="713" height="1229" alt=""> 


      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_57.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_58.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_59.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_60.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_61.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_62.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_63.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_64.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_65.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_66.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_67.gif" width="713" height="1228" alt=""> 


      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_68.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_69.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_70.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_71.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_72.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_73.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_74.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_75.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_76.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_77.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_78.gif" width="713" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_79.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_80.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_81.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_82.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_83.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_84.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_85.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_86.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_87.gif" width="1228" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_88.gif" width="1229" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_89.gif" width="713" height="1229" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_90.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_91.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_92.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_93.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_94.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_95.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_96.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_97.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_98.gif" width="1228" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_99.gif" width="1229" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_100.gif" width="713" height="1228" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_101.png" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_102.gif" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_103.gif" width="1228" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_104.gif" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_105.gif" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_106.gif" width="1228" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_107.gif" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_108.gif" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_109.gif" width="1228" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_110.gif" width="1229" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_111.jpg" width="713" height="1231" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_112.gif" width="13000" height="26" alt=""> 


      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1228" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1228" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1228" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1226" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt=""> 

      <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="713" height="1" alt=""> 

       </div> 
      </div>

그리고 JS

$('.map_inner').draggable({ 
    containment: '.map_container' 
})

과 CSS, 추천 바랍니다 나 plu 그걸하기 위해 진.

출처

2017-12-14 Ievhen Danilov

+0

:

는 코드의 예에서 갈래. 마우스 움직임에 따라 타일의 위치를 ​​이동하고 싶습니다. 이 작업을 수행하는 데 Draggable을 사용할 수 있습니다. 모든 타일 위에 앉아있는 하나의 div를 만들어야합니다. 그리고 그것은 타일의 위치를 ​​조정할 것입니다. – Twisty

답변

0

드래그 가능을 사용하려는 경우 타일 또는 이미지를 드래그하여을 드래그하지 않으려 고합니다. 사용자가 시작하는 움직임에 따라 전체 위치를 조정하려고합니다.

.map_move_layer { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: transparent; 
    z-index: 1000; 
}

우리는 타일의 상단에 눈에 보이지 않는 div의 종류를 배치 할 수 있습니다 : 우리는이 CSS를 사용한 경우

<div class="map_container"> 
    <div class="map_inner"> 
    <!-- Images --> 
    </div> 
    <div class="map_move_layer"> 
    </div> 
</div>

:

이 HTML을 고려하십시오. 젖꼭지가 창 또는 뷰포트와 동일한 크기가되도록하십시오. 

$(".map_move_layer").css({ 
    width: $(window).width() + "px", 
    height: $(window).height() + "px" 
});

우리는 다음 원하는이 요소에 드래그 적용하고 그 움직임에 따라 map_inner의 위치를 ​​조정합니다.

시험 예 : https://jsfiddle.net/Twisty/xwkddzec/8/

스크립트 니핏

$(function() { 
    var max = { 
    top: 12341, 
    left: 13000 
    }; 
    var min = { 
    top: -12341, 
    left: -13000 
    } 

    $(".map_move_layer").css({ 
    width: $(window).width() + "px", 
    height: $(window).height() + "px" 
    }).draggable({ 
    drag: function(e, ui) { 
     var p = ui.position; 
     var mPos = $(".map_inner").position(); 
     var newPos = { 
     top: mPos.top + p.top, 
     left: mPos.left + p.left 
     }; 
     if ((newPos.top < max.top && newPos.top > min.top) || (newPos.left < max.left && newPos.left > min.left)) { 
     $(".map_inner").css({ 
      top: newPos.top + "px", 
      left: newPos.left + "px" 
     }); 
     } 
    }, 
    stop: function(e, ui) { 
     $(this).css({ 
     top: 0, 
     left: 0 
     }); 
    } 
    }); 
});

사용자 클릭 및 드래그, 그것은지도 영역 위치를 다시한다. 멈 추면 오버레이가 시작 위치로 돌아갑니다. 필요에 따라이 값을 조정하여 움직임이 적거나 많을 수 있습니다. 예 :

newPos = { 
    top: mPos.top + (p.top * .5), 
    left: mPos.left + (p.left * .5) 
}

희망이 있습니다. 당신은이에 대한 드래그 가능한 사용하지 않습니다 https://jsfiddle.net/Twisty/wees27gt/

출처

2017-12-14 22:24:26 Twisty

+0

안녕하세요! 답변 감사합니다. 그러나이 솔루션은 필요에 따라 제대로 작동하지 않습니다. 첫째 -지도를 클릭하고 일부 목적지에서 천천히 드래그하면 화면 밖으로 "수영"하는지도가 시작되고 부모 div에서지도를 드래그 할 수 있기 때문에 봉쇄가 전혀 작동하지 않는 것 같습니다. –

 관련 문제

  • 관련 문제 없음^_^