jQuery MobileのタポールとjQuery UIを組み合わせることができます

Question

私はjQuery UIのドラッグ可能な機能とjQuery Mobileのタポールイベントを組み合わせようとしているモバイルアプリケーションに取り組んでいます。アイデアは、タポールを実行すると要素がドラッグ可能になるということです。

ドラッグ可能には、次のコード内の要素に初期化されている：あなたは、私がtapholdイベント後、それを有効にしたいので、ドラッグ可能な機能は、最初は無効になって見ることができるように

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

。私は現在、次のコードを使用しています。この達成するために：

// 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はタッチイベントでは機能しません。私はあなたがこれを修正するために自然な調整をしたと仮定しています。

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

次のように、jquery mobileでタポールがどのように実装されているために、touchstartイベントが流れていないとします。

ドラッグ可能なのは、タッチスタート/マウスダウンのイベントが発生した場合にのみ開始されます。

私は前と同じようなものを見ましたが、ダブルタップはドラッグ可能なものと一緒に見ました。

あなたはドラッグ可能にしてキックするために手動で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を追加することを忘れないでください！