jQuery Mobile taphold와 jQuery UI draggable 결합하기

Question

저는 jQuery UI의 드래그 가능한 기능과 jQuery Mobile의 태폴드 이벤트를 결합하려고하는 모바일 애플리케이션에서 작업하고 있습니다. 아이디어는 태폴드가 실행될 때 요소가 드래그 가능하게된다는 것입니다.

드래그 가능한 다음 코드의 요소에 초기화되고 :

$('div.rect', '#outerBox').draggable({ 
    containment: "parent", 
    grid: [50, 50], 
    disabled: true, 
    stop: function(event, ui) { 
     $(this).draggable('disable'); 
     $(this).removeClass('highlighted'); 
    } 
}); 

당신은 내가 taphold 이벤트 후에 그것을 사용하려는 때문에 드래그 기능이 처음 비활성화되어 볼 수 있듯이. 저는 현재 다음과 같은 코드를 사용하고이를 달성하기

// Bind long press event to rectangle elements 
$('div.rect', '#outerBox').bind('taphold', function(event, ui) { 
    // Enable dragging on long press 
    $(this).addClass('highlighted'); 
    $(this).draggable('enable'); 
}); 

이 작동하지만, 문제가있는 '출시 - 및 - 탭 again' 이벤트는 주변의 요소를 드래그하기 위해 필요하다 대신하다 태폴드 이벤트 직후에 끌기. 이것은 일종의 이벤트 간섭 문제 일 수 있습니까? event.preventDefault() 같은 것을 시도했지만 jQuery 이벤트에 대한 지식이별로 없기 때문에 이것이 어떤 차이를 만들어야할지 전혀 모릅니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

Answer 1

첫 번째로, jquery ui draggable은 터치 이벤트에서 작동하지 않습니다. 이 문제를 해결하기 위해 네 서사 조정을했다고 가정합니다.

e.e. Jquery-ui sortable doesn't work on touch devices based on Android or IOS

다음 jquery mobile에서 taphold가 어떻게 구현 되었기 때문에 touchstart 이벤트가 진행되지 않는다고 말합니다.

draggable은 터치 시작/마우스 다운 이벤트가 발생하는 경우에만 시작됩니다.

나는 이전과 비슷한 것을 보았지만 draggable과 함께 doubletap을 보았습니다.

당신이 걷어차 드래그를 위해 수동으로 taphold 이벤트 핸들러 내부 touchstart 이벤트를 트리거해야 할 수도 있습니다

: 조금 늦게하지만

$('div.rect', '#outerBox').bind('taphold', function(event, ui) { 
    var offset = $(this).offset(); 
    var type = $.mobile.touchEnabled ? 'touchstart' : 'mousedown'; 
    var newevent = $.Event(type); 
    newevent.which = 1; 
    newevent.target = this; 
    newevent.pageX = event.pageX ? event.pageX : offset.left; 
    newevent.pageY = event.pageY ? event.pageX : offset.top; 

    $(this).trigger(newevent); 
}); 

Answer 2

-이이 taphold 플러그인을 생략하고이를 이용하여 작업있어 대신. Touch Punch을 기억하십시오!