7

スワイプイベントと要素のドラッグに問題があります。

私のアプリケーションでは、左/右にスワイプしてページ間を移動します（機能します）。1ページにたくさんのドラッグ要素があります（ドラッグ作業）。

したがって、問題は、要素が水平方向に右にドラッグしているときに、ドラッグストップ後に左にスワイプすると機能することです。左にドラッグしても同じです。右にスワイプすると機能します。

それは私を混乱させます。

それで、要素をドラッグするときに左/右のスワイプを停止または中断することは可能ですか？

これはスワイプのコードです（Stackoverflow thxから）

$('div.ui-page').live("swipeleft", function() {
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, 'slide');
    }
});
$('div.ui-page').live("swiperight", function() {
    var prevpage = $(this).prev('div[data-role="page"]');
    // swipe using id of next page if exists
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, 'slide', true);
    }
});

そしてこれはドラッグのコードです

$ (function(){
var numbers = [ 1, 2, 3, 4, 5 ];    
    numbers.sort( function() { return Math.random() - .5 } );
    alert(numbers);

for ( var i=1; i<6; i++ ) {
    $('#'+i).attr( 'src','bilder/'+numbers[i-1]+'.png' ).draggable( {
      cursor: 'move',
      containment: $('#'+i).parent().parent(),
      revert: true,

    });
  } 
});
4

2 に答える 2

3

jQueryevent.preventDefault()はそれを正確に処理する必要があります。現在のコードでは、ドラッグイベントハンドラーが完了すると、ジェスチャーはモバイルブラウザーによって解析されるように「続行」されます。ユーザーのドラッグアンドドロップアクションが左スワイプに似ている場合は、関連するハンドラーがトリガーされます。

$('div.ui-page').live("swipeleft", function(_event) { //reference the event object
  /*your code*/
  _event.preventDefault();
  return false;
});

変更後、jQueryは、イベントが終了したことをブラウザーに指示します。デフォルトの応答をトリガーするためにブラウザーに「戻す」べきではありません（この場合、スワイプジェスチャを解決します）。

アップデート：

コメントで述べたように、私はpreventDefault()スワイプハンドラーの一部として誤って提案しました。これはドラッグドロップイベントハンドラーの一部である必要があります。このJSを統合することを推奨するこの回答を確認してください。これにより、グローバルレベルで問題に対処できるはずです。

于 2012-11-13T22:19:50.190 に答える
1

さて、今私は解決策を得ました：

ovの答えは正しかったし、ahrenのアドバイスで私はそれを解決した。

ここで説明するのはコードです：

var moveme=false;  // global variable is false(by default) when no element is dragged

$('div.ui-page').live("swipeleft", function (event){

if(moveme===true){event.preventDefault(); return false;}

var nextpage = $(this).next('div[data-role="page"]');
// swipe using id of next page if exists

if (nextpage.length > 0) {
$.mobile.changePage(nextpage, 'slide',true);
}
});

$('div.ui-page').live("swiperight", function(event){

if(moveme===true){event.preventDefault(); return false;}

var prevpage = $(this).prev('div[data-role="page"]');
// swipe using id of next page if exists

if ( prevpage.length > 0) {
$.mobile.changePage(prevpage, 'slide', true);
}
});

ドラッグ可能なコード：

$ (function(){
var numbers = [ 1, 2, 3, 4, 5 ];    
    numbers.sort( function() { return Math.random() - .5 } );
    alert(numbers);

for ( var i=1; i<6; i++ ) {
    $('#'+i).attr( 'src','bilder/'+numbers[i-1]+'.png' ).draggable( {
      cursor: 'move',
      containment: $('#'+i).parent().parent(),
      revert: true,



      start: function(){moveme=true;}, //if an element is dragged moveme=true and
                                       //event.preventDefault() is used. So it is not possible to swipe
      stop: function(){moveme=false;}, //after dragging swipe can be used (default)

        });

  } 
});

だから、あなたの助けをありがとうovとahren

于 2012-11-14T20:02:52.727 に答える