jQuery मोबाइल टैपहोल्ड और jQuery यूआई ड्रैगगेबल

Question

का संयोजन मैं मोबाइल एप्लिकेशन पर काम कर रहा हूं जहां मैं jQuery मोबाइल की टैपहोल्ड कार्यक्षमता के साथ jQuery UI की ड्रैगगेबल कार्यक्षमता को गठबंधन करने का प्रयास कर रहा हूं। विचार यह है कि जब एक टैपहोल्ड निष्पादित किया जाता है तो एक तत्व खींचने योग्य हो जाता है।

खींचने योग्य निम्नलिखित कोड में तत्वों पर प्रारंभ किया जा रहा है:

$('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 स्पर्श घटनाओं के साथ काम नहीं करता है। मुझे लगता है कि आपने इसे ठीक करने के लिए नैसेसरी समायोजन किया है।

आईई। Jquery-ui sortable doesn't work on touch devices based on Android or IOS

अगला मैं कहूंगा कि टचस्टार्ट ईवेंट jquery मोबाइल में टैपहोल्ड लागू करने के कारण क्यों नहीं बह रहा है।

ड्रैगगेबल केवल तब शुरू किया जाएगा जब इसे टचस्टार्ट/मूसडाउन घटना मिलती है।

मैंने पहले कुछ ऐसा देखा है, लेकिन एक ड्रैगगेबल के साथ संयोजन में एक डबलटैप के साथ।

आप में किक करने के लिए खींचने योग्य मैन्युअल रूप से अपने 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 जोड़ने के लिए याद रखें!

$('#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); 
});