자바 스크립트 (HTML5 아님)를 사용한 드래그 앤 드롭?

Question

HTML5를 사용하여 오프라인 하이브리드 Android 앱을 만들고 있습니다.

HTML5의 드래그 앤 드롭 기능은 아직 Android에서 지원되지 않으므로 다른 방법을 사용하고 싶습니다.

JavaScript를 사용하여 끌어서 놓기를 구현하는 다른 방법은 무엇입니까?

Answer 1

모바일에서 끌어서 놓기를 수행하려면 jquery-ui-touch-punch 또는 Mobile Drag And Drop을 사용할 수 있습니다.

다음 링크에서 각각 찾아 볼 수 있습니다.

http://touchpunch.furf.com/는

Answer 2

드래그를 실행하고 드롭 추가 라이브러리의 어떤 형태없이 자바 스크립트를 사용하거나 HTML5 기능 내장의 기본

http://www.stevefenton.co.uk/cmsfiles/assets/File/mobiledragdrop.html/다양한 마우스에 부착 브라우저에서 이벤트를 터치입니다;

• mousedown/touchstart

mousedown/touchstart가 트리거되면, 당신은 클릭 된 요소를 복제 것 (또는 기존의 요소를 이동) 그리고 당신이 할 수 있도록 절대 위치로 설정 그것을 페이지 주위로 옮기십시오. 드래그가 시작되면 드래그되는 요소에 대한 참조를 설정하여 이동 이벤트가 현재 이동 된 것을 추적 할 수 있습니다. 이 이벤트가 발생하고 요소에 대한 참조가 있으면 mousemove/touchmove 이벤트를 문서에 첨부하고 실제 이동을 듣기 시작합니다.

• MouseMove 이벤트 /하는 TouchMove

mouseMove 및 /하는 TouchMove 이벤트가 발사 될 때, 화면 주위의 요소를 이동하는 이벤트 위치를 사용할 수 있습니다. 최고의 성능을 위해서는 mousemove/touchmove 이벤트를 단일 요소가 아닌 전체 문서에 첨부해야합니다. 그렇지 않으면 요소를 업데이트 할 수있는 것보다 마우스가 빨리 이동하는 문제가 발생합니다.

• 와 mouseUp/touchend

와 mouseUp/touchend이 발사 될 때 마지막으로, 당신은 droppoint에 대해 계산하는 최종 위치를 사용할 수 있습니다. mousemove/touchmove 이벤트와 드래그되는 요소에 대한 참조를 해제 할 수도 있습니다.

JQuery를 사용하여 터치 이벤트를 관리하는 빠른 예제는 http://jsfiddle.net/y9f3B/에서 테스트 할 수 있습니다.

var target = null; 

$('#draggables li').on('touchstart', function(e) { 
    var target = $(e.currentTarget).clone(); 
    target.addClass('dragging'); 

    // run an intial alignment before adding to the dom 
    target.css('left', (e.originalEvent.touches[0].clientX - (target.width()/2))); 
    target.css('top', (e.originalEvent.touches[0].clientY - (target.height()/2))); 

    $('body').append(target); 

    $(document).on('touchmove', function(e) { 
     if (target != null) { 
      // move the target 
      target.css('left', (e.originalEvent.touches[0].clientX - (target.width()/2))); 
      target.css('top', (e.originalEvent.touches[0].clientY - (target.height()/2))); 
     } 
    }); 

    $(document).on('touchend', function(e) { 
     if (target != null) {    
      var x = (target.offset().left + (target.width()/2)); 
      var y = (target.offset().top + (target.height()/2)); 

      // calculate if were inside of the dropzone 
      var offset = $('#dropzone').offset(); 

      if (x > offset.left && x < (offset.left + $('#dropzone').width()) && y > offset.top && y < (offset.top + $('#dropzone').height())) { 
       var dropped = target.clone(); 
       dropped.removeClass('dragging'); 

       $('#dropzone').append(dropped); 
      } 

      target.remove(); 

      $(document).off('touchmove'); 
      target.off('touchup'); 

      target = null; 
     } 
    }); 
});