드래그 가능 좌표 및 오프셋 좌표

Question

나는 드래그 가능한 상자에 대한 최종 오프셋 좌표를 얻으려고했지만 최종 x 및 최종 xmax는 모두 표시하지 않고 y 축도 동일하게 표시했습니다. 변수 finalxmPos를 넣고 id가 finalXm 인 목록에 텍스트를 추가하면 문제가 발생한다는 것을 알 수 있습니다. 왜냐하면 두 줄을 제거하더라도 작동하지만 마지막 xmin과 xmax는 xmin을 얻지 못하기 때문입니다. 코드는 바로 여기 http://jsfiddle.net/DGbT3/133/입니다. 어떤 도움을 이해할 수있을 것이다 ..

Answer 1

작업 예 : http://jsfiddle.net/DGbT3/137/

당신은 그냥 케이스 오류를했다. 오프셋의 o는 대문자 여야합니다. 또한 폭()에 대한 호출이 의견

폭()

체크 아웃을 했어야

$('#dragThis').draggable(
     { 
      containment: $('body'), 
      drag: function(){ 
       var offset = $(this).offset(); 
       var xPos = offset.left; 
       var xmPos = offset.left + $('#dragThis').outerWidth(); 
       var yPos = offset.top; 
       var ymPos = offset.top + $('#dragThis').outerHeight(); 
       $('#posX').text('x: ' + xPos); 
       $('#posmX').text('xm: ' + xmPos); 
       $('#posY').text('y: ' + yPos); 
       $('#posmY').text('ym: ' + ymPos); 
      }, 
      stop: function(){ 
       var finalOffset = $(this).offset(); 
       var finalxPos = finalOffset.left; 
       var finalxmPos = finalOffset.left + $('#dragThis').width(); //needed to uppercase o in finalOffset 
//also changed Width to width() 
       var finalyPos = finalOffset.top; 

     $('#finalX').text('Final X: ' + finalxPos); 
     $('#finalXm').text('Final Xmax: ' + finalxmPos); 
     $('#finalY').text('Final Y: ' + finalyPos); 
      } 
     }); 

    $('#dropHere').droppable(
     { 
      accept: '#dragThis', 
      over : function(){ 
       $(this).animate({'border-width' : '5px', 
           'border-color' : '#0f0' 
           }, 500); 
       $('#dragThis').draggable('option','containment',$(this)); 
      } 
     });