web-dev-qa-db-ja.com

モバイル用のjquery UIソート可能ホールドアンドドラッグ

JQuery UIのソート可能なリストがあります。私はそれをモバイルデバイスで動作させるようにしています。タッチパンチの回避策を使用しました。スクロールするには、ソート可能な機能を非アクティブ化する必要があります。これを実行し、リスト要素をタップするとソート可能な機能をアクティブにします。それは大丈夫ですが、問題は私がタップホールド中に要素をソートできるようにしたいということです。現在は次のようにしか機能しません。要素をタップホールド（タップストップ）してから、並べ替えるためにもう一度タップする必要があります。

HTMLコード：

<ul class="list-group" id="wrapper">
 <li class="list-group-item">Block 1</li>
 <li class="list-group-item">Block 2</li>
 <li class="list-group-item">Block 3</li>
 <li class="list-group-item">Block 4</li>
 <li class="list-group-item">Block 5</li>
 <li class="list-group-item">Block 6</li>
 <li class="list-group-item">Block 7</li>
 <li class="list-group-item">Block 8</li>
 <li class="list-group-item">Block 9</li>
 <li class="list-group-item">Block 10</li>
 <li class="list-group-item">Block 11</li>
 <li class="list-group-item">Block 12</li>
 <li class="list-group-item">Block 13</li>
 <li class="list-group-item">Block 14</li>
 <li class="list-group-item">Block 15</li>
 <li class="list-group-item">Block 16</li>
 <li class="list-group-item">Block 17</li>
 <li class="list-group-item">Block 18</li>
 <li class="list-group-item">Block 19</li>
 <li class="list-group-item">Block 20</li>
 <li class="list-group-item">Block 21</li>
 <li class="list-group-item">Block 22</li>
 <li class="list-group-item">Block 23</li>
</ul>

JSコード：

$('#wrapper li').on('taphold', function(event, ui) {
    $( "#wrapper li" ).removeClass('selected');
    $( "#wrapper" ).sortable({disabled:false});
    $(this).addClass('selected');
});

$( "#wrapper" ).sortable({disabled:true,containment: "parent"});

$( "#wrapper" ).on( "sortupdate", function( event, ui ) {
    $( "#wrapper" ).sortable({disabled:true});
} );

ここに例のjsfiddle（ https://jsfiddle.net/3cygah12/ ）があります。

誰もがこの問題を解決する方法を知っていますか？

jqueryjquery-uijquery-mobile
13
Shile

なんとかやりました。

タッチパンチ（ http://touchpunch.furf.com/ ）コードの一部を次のように変更して、タッチスタートをタップホールドにバインドしました-

mouseProto._mouseInit = function () {

var self = this;

// Delegate the touch handlers to the widget's element
self.element
    .bind('taphold', $.proxy(self, '_touchStart'))   // IMPORTANT!MOD FOR TAPHOLD TO START SORTABLE
    .bind('touchmove', $.proxy(self, '_touchMove'))
    .bind('touchend', $.proxy(self, '_touchEnd'));

// Call the original $.ui.mouse init method
_mouseInit.call(self);
};

また、 https://github.com/benmajor/jQuery-Touch-Events も使用されます。それは今動作します！

12
Shile

私はこの小さなプラグインで同じ問題に対処しました：

http://touchpunch.furf.com/

このライブラリをスクリプトに追加します。

それを行う別の方法は、モバイルjqueryライブラリ全体をダウンロードして（ ここ ）、このように動作することです

$('#yourSelector').on('touchstart mousedown', function(event){
  event.preventDefault();
  var touch = event.touches[0];
 if(touch){
   //Do some stuff
 }
 else {
  //Do some other stuff
 }
});
9
Sidius