jquery 드래그 후 여러 요소의 위치 표시

Question

jQuery UI를 사용하여 여러 드래그 가능한 요소의 위치를 ​​얻으려고합니다. 비슷한 질문 (X and Y Positions of multiple jQuery UI Elements)을 찾았지만 제 경우에는 여러 개의 draggable div를 가지고있는 div가 있으므로 응답이 나에게 도움이되지 않습니다.

는

$('#snaptarget').each(function() { 
 
    var elems = $(this).find('div'); 
 
    elems.draggable({ 
 
    containment: '#snaptarget', 
 
    scroll: false, 
 
    grid: [5, 5], 
 
    drag: function() { 
 
     var links = Math.round(elems.position().left)/20; 
 
     var oben = Math.round(elems.position().top)/20; 
 
     $(this).find('span').html('Links: ' + links + 'mm<br>Oben: ' + oben + 'mm'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="snaptarget" style="background: green;height: 1720px; width: 1720px; position: absolute;margin: 20mm;"> 
 
    <div id="ci1" style="z-index: 999; position: absolute; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;"> 
 
    <p>id: ci1<br> 
 
     <span id="p_ci1"></span> 
 
    </p> 
 
    </div> 
 
    <div id="ci2" style="z-index: 999; position: absolute; left: 160px; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;"> 
 
    <p>id: ci2<br> 
 
     <span id="p_ci2"></span> 
 
    </p> 
 
    </div> 
 
</div>

내 코드는 첫 번째 드래그 할 수있는 요소에 대해 작동합니다. 그러나 두 번째 draggable 요소는 첫 번째 요소의 위치를 ​​얻습니다.

내 경우에 요소 당 위치를 얻는 방법을 누군가에게 알려주시겠습니까?

때문에 $(this)가 #snaptarget을 참조 코드에서 당신에게

Answer 1

문제는 감사, 당신의 div는에 draggable()를 인스턴스화하고 있지. 또한 elems은 요소 모음이므로 position()을 읽으면 첫 번째 요소의 값만 검색됩니다.

는이 $('#snaptarget div')에 선택을 변경 수정하려면 :

$('#snaptarget div').each(function() { 
 
    var $elem = $(this); 
 
    $elem.draggable({ 
 
    containment: '#snaptarget', 
 
    scroll: false, 
 
    grid: [5, 5], 
 
    drag: function() { 
 
     var links = Math.round($elem.position().left)/20; 
 
     var oben = Math.round($elem.position().top)/20; 
 
     $elem.find('span').html('Links: ' + links + 'mm<br>Oben: ' + oben + 'mm'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="snaptarget" style="background: green;height: 1720px; width: 1720px; position: absolute;margin: 20mm;"> 
 
    <div id="ci1" style="z-index: 999; position: absolute; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;"> 
 
    <p>id: ci1<br> 
 
     <span id="p_ci1"></span> 
 
    </p> 
 
    </div> 
 
    <div id="ci2" style="z-index: 999; position: absolute; left: 160px; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;"> 
 
    <p>id: ci2<br> 
 
     <span id="p_ci2"></span> 
 
    </p> 
 
    </div> 
 
</div>