뷰포트 컨테이너 내부의 자바 스크립트 드래그 div

Question

모바일 장치의 드래그 앤 드롭 기능을 구현하려고합니다 ... 고정 너비/높이의 컨테이너 div가 있고 그 안에 내용이있는 다른 div가 있지만 크기가 크기보다 큽니다. 부모.

내 문제는 draggable div를 클릭하면 움직일 수 있지만 화면에서 touchmove를 시작할 때마다 드래그 할 수있는 요소 위치를 동일하게 유지하는 해결책을 찾지 못한다는 것입니다.

내가 가능한 한 최소한이 유지하려고 또한 나는 jQueryUI

PS를 사용하려는 해달라고 요소는 터치 에뮬레이션 여기

를 사용하여 바탕 화면에 작동 ​​드래그하면 당신은 아닌 현재 위치를 위치의 변화를 얻을 필요가 내 코드

<div class="container"> 
    <div class="draggable"> 

    </div> 
</div> 

<script> 
    $(document).on('touchmove','.draggable',function(e){ 

     //Prevent default for mobile devices so the element inside the container can be dragged witouth stopping 
     //e.preventDefault(); 

     //Calculating the distance where the touch event stopped 
     var xPos = e.originalEvent.touches[0].pageX; 
     var yPos = e.originalEvent.touches[0].pageY; 


     //Moving the draggable element around 
     $(this).css({ 
      left: xPos + $(this).offset().left + 'px', 
      top: yPos + $(this).offset().top + 'px' 
     }); 

    }); 
</script> 

<style> 
    .container 
    { 
     width:200px; 
     height:200px; 
     overflow:hidden; 
     position:relative; 
    } 
    .draggable 
    { 
     width:1000px; 
     height:1000px; 
     background:url('http://th04.deviantart.net/fs71/PRE/f/2014/249/d/f/seraphim_by_alexiuss-d7y4v0o.jpg'); 
     position:relative; 
    } 
</style> 

Answer 1

예를 들어 여기에 JSFiddle

입니다 .

var touch_x= 0; 
var touch_y= 0; 

을 touchstart에 당신 pageX 현재에 touch_x 및 touch_y을 설정할 수 있습니다 그래서 이것이 의미하는 것은 당신이 touchstart에 pageX 및 pageY 당신은 아마 다음과 같이 나중에 액세스 할 수있는 몇 가지 변수들을 저장 얻을해야합니다입니다 및 pageY.

그러면 touchmove에서이를 참조하고 차이점을 찾을 수 있습니다. 그래서 pageX로 이동하면 touch_x - pageX로 이동합니다. 이렇게하면 양수 및 음수 방향으로 이동하게됩니다. 현재 코드는 항상 양수이므로 긍정적 인 방향으로 만 이동합니다.