div 위치 내에서 드래그 가능한 jquery 함수

Question

div 내에서 이미지 (현재는 하나의 이미지 만)를 드래그하기 위해 Jquery 스크립트를 사용하고 있습니다. 나는 현재이 코드를 사용하고 있습니다 :

var offset = 0, 
     xPos = 0, 
     yPos = 0; 

$(document).ready(function(){ 
    $(".item").draggable({ 
     containment: '#house_wall1', 

     drag: function(){ 
      offset = $(this).position(); 
      xPos = offset.left; 
      yPos = offset.top; 
      $('#posX').text('x: ' + xPos); 
      $('#posY').text('y: ' + yPos); 
     }, 

     // Find original position of dragged image. 
     start: function(event, ui) { 
      // Show start dragged position of image. 
      var Startpos = $(this).position(); 
      $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top); 
     }, 

     // Find position where image is dropped. 
     stop: function(event, ui) { 
      // Show dropped position. 
      var Stoppos = $(this).position(); 
      $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
     } 
    }); 
}); 

내 문제는 드래그 이미지가 DIV 내부 아니라고하지 않다, 내 문제는 위치의 x와 y가 DIV를 화면 크기에서 계산되지 않는 것입니다. 즉, 화면의 크기를 조정하거나 화면 해상도를 낮추면 실제로는 다른 해상도의 사람과 다른 x 및 y 위치가 유지됩니다. 화면 크기 대신 div 여백에서 x 및 y를 추적하도록 이미지 위치를 어떻게 변경할 수 있습니까? 미리 감사드립니다.

Answer 1

offset() 대신 position()을 사용하십시오. position() 위/왼쪽 w.r.t를 제공합니다. 문서 상단/왼쪽 대신 요소의 부모 요소에 적용됩니다.

offset = $(this).position();