リストエレメントに対してスワイプイベントを使用してオプションと条件を追加するにはどうすればよいですか？

Question

私はli要素で単純な順序付けられていないリストを持っています。 rc-swipeout npmライブラリと似たようなことをしたいのですが、リスト要素をスワイプするとオプションが表示されます。

残念ながら私はMeteor/Blazeアプリケーションを実行しており、Reactを使用することはできません。私はdemo here（モバイルで動作する）を持っているswipeToのようなシンプルなjQueryであるライブラリのいくつかを見つけました。

実際にスワイプ機能を提供するスワイプ機能は、スワイプ時にオプションを表示します。

ただし、私はすべての方法でスワイプすると、リストアイテムが削除される機能を追加したいと思います。今すぐあなたがすべての方法でスワイプすると、リストアイテムはそのデモで見ることができるように通常の位置に戻ります。

このような条件を追加する最も良い方法は何ですか？

Answer 1

event.clientXを確認してください。 swipeStartに値を保存し、swipeEndの値と比較します。 （swipeTo.jsスクリプト作られたイベントが使用可能に座標どのように私は把握できなかったので、私はそれを編集し、ライン40及び93）：

if(typeof swipeStart == 'function') { 
    swipeStart.call(this, start); //add 'start' as parameter 
} 

if(typeof swipeEnd== 'function') { 
    swipeEnd.call(this, absMoveStatus, e.changedTouches[0].clientX); //add amount moved and clientX as parameter 
} 

をあなたのメインスクリプトでは：で

$(function() { 
    $('.item-swipe').swipeTo({ 
     minSwipe: 100, 
     angle: 10, 
     binder: true, 
     swipeStart: function(start) { //now use start value 
      console.log('start', start); 
     }, 
     swipeMove: function(e) { 
      console.log('move'); 
     }, 
     swipeEnd: function(movedAmount, end) { 
      console.log('end', movedAmount, end); 
      // if movedAmount value > 200, and end value < 20 (close to left side), 
      // then delete the item 
     }, 
    }); 
    deleteItem(); 
})