Łącząc taphold jQuery Mobile i jQuery UI przeciągalne

Question

pracuję w aplikacji mobilnej, gdzie staram się połączyć Draggable funkcjonalność jQuery UI jest z imprezy taphold jQuery Mobile. Chodzi o to, że element staje się dający się przeciągnąć, gdy wykonywana jest tafta.

Draggable jest inicjowany na elementach w poniższym kodzie:

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

Jak widać przeciągany funkcjonalność jest początkowo wyłączona, ponieważ chcę, aby włączyć go po zdarzeniu taphold. Aby to osiągnąć obecnie używam następujący kod:

// 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'); 
}); 

To działa, ale problemem jest to, że „zamiast zwolnić i-tap-again'-event jest potrzebne, aby przeciągnąć element wokół, przeciągania bezpośrednio po zdarzeniu typu taphold. Czy może to być jakiś problem z zakłóceniami zdarzeń? Próbowałem rzeczy jak event.preventDefault() ale moja wiedza o wydarzeniach jQuery nie jest dużo, więc nie mam pojęcia, czy nie powinno to żadnej różnicy.

Każdy pomysł jak rozwiązać ten jeden?

Answer 1

pierwsze, jQuery UI przeciągalne nie działa ze zdarzeń dotykowych. Zakładam, że wprowadziłeś niezbędne korekty, aby to naprawić.

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

Następnie powiedziałbym, że zdarzenie touchstart nie przepływa z powodu tego, jak taphold został zaimplementowany w jquery mobile.

możliwa do przesunięcia zostanie rozpoczęta jedynie wtedy, gdy dostaje touchstart/MouseDown zdarzenie.

Widziałem coś podobnego wcześniej, ale z DoubleTap w połączeniu z przeciągany.

może trzeba ręcznie wywołać zdarzenie touchstart wewnątrz obsługi zdarzeń taphold dla przeciągany kopać w:

$('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

Choć trochę późno - Dostałem to do pracy omijając wtyczki taphold i za pomocą tego zamiast. Pamiętaj, aby dodać Touch Punch!

$('#whatever').on('touchstart', function (event) { 
    var me = this; 

    if (!me.touching) { 
     if (me.touched) { clearTimeout(me.touched); }; 
     me.touched = setTimeout(function() { 
      //console.log('taphold'); 

      //Prevent context menu on mobile (IOS/ANDROID) 
      event.preventDefault(); 

      //Enable draggable 
      $this.draggable('enable'); 

      //Set internal flag 
      me.touching = true; 

      //Add optional styling for user 
      $(me).addClass('is-marked'); 

      //trigger touchstart again to enable draggable through touch punch 
      $(me).trigger(event); 

      //Choose preferred duration for taphold 
     }, 500); 
    } 
}).on('touchend', function() { 
    //console.log('touchend'); 
    this.touching = false; 

    //Disable draggable to enable default behaviour 
    $(this).draggable('disable'); 

    //Remove optional styling 
    $(this).removeClass('is-marked'); 

    clearTimeout(this.touched); 
}).on('touchmove', function() { 
    //console.log('touchmove'); 

    clearTimeout(this.touched); 
});