如何在 JQM 网站中使用 touchSwipe 事件来滑动 div答案

【问题标题】：How to use touchSwipe event to a sliding div in JQM website如何在 JQM 网站中使用 touchSwipe 事件来滑动 div
【发布时间】：2014-07-17 07:19:38
【问题描述】：

我有一个适用于点击事件的简单滑块。然后我试图在 sipe left right 上添加相同的效果。但我很难做到这一点

这是我创建的fiddle。

我正在为手势使用 swipeTouch 插件。

如果有人可以使用滑动手势更新小提琴以实现相同的效果，那将非常有帮助。

脚本

$(".fieldset").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
        // $(this).text("You swiped " + direction );

        if (direction == 'right') {
            console.log("You swiped " + direction);
        }
    }
});

$('ul li.fieldset').each(function () {
    var h = $(this).height();
    var next_height = $(this).next('.hidenset').height();
    var diff = h - next_height;
    console.log('The height of li:' + h);
    $(this).next('.hidenset').css('height', h + 'px');
    $(this).next('.hidenset').css('margin-top', -h + 'px');

});

$(".fieldset a").click(function () {
    parent = $(this).parent('.fieldset');
    $('.fieldset').not(parent).removeClass('left-slide').addClass('right-slide');

    if ($(parent).hasClass('left-slide')) {
        $(parent).removeClass('left-slide').addClass('right-slide');
    } else {
        $(parent).removeClass('right-slide').addClass('left-slide');
    }

    form = $(parent).attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];

    $('.hidenset').not(menu).removeClass('menu-open').addClass('menu-close');

    if ($(menu).hasClass('menu-open')) {
        $(menu).removeClass('menu-open').addClass('menu-close');
    } else {
        $(menu).removeClass('menu-close').addClass('menu-open');
    }

});

感谢和问候

【问题讨论】：

标签： javascript android jquery jquery-mobile swipe-gesture

【解决方案1】：

给你：

更新FIDDLE

$(".fieldset").swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
   // $(this).text("You swiped " + direction );
   alert("You swiped " + direction );
   if(direction == 'right') {
       //only slide if menu is open
       if($(this).hasClass('left-slide')) {
           $(this).find("#sub2").click();
       }
   } else if (direction == 'left') {
       //only slide if menu is closed
       if($(this).hasClass('right-slide')) {
           $(this).find("#sub2").click();
       }
   }
  }
});

您检查滑动的方向并查看菜单是否已经处于适当的状态。如果没有，在fieldset中找到按钮，触发click事件。

【讨论】：

对此只有一条评论。昨天在使用滑动事件时，我发现了 .如果我使用 swipe:function() ，那么它会影响 jqueryMobile 的其他触摸事件。所以为此，我们应该只使用在我的情况下需要的事件 swiperight:function() 和 swipeleft:function() 。 :)

【解决方案2】：

基于@ezanker 提供的答案

我的答案适用于那些尝试使用 Jquery Mobile + TouchSwipe 的人。

如果我们只使用swipe:function(event, direction, distance, duration, fingerCount) {} 函数，那么它会影响JQM 的其他touch 事件，因为它是JQuery 的触摸优化版本。

脚本

$(".fieldset").swipe({
                  swipeLeft: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is open
                if ($(this).hasClass('right-slide')) {

                $(this).find(".anchor1").click();
            }
        },
     swipeRight: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is closed
            if ($(this).hasClass('left-slide')) {
                $(this).find(".anchor1").click();
            }
        }
});

我使用 touchSwipe 是因为 JQM 的 swipeleft 和 swiperight 事件在浏览器中没有正确响应

希望对大家有所帮助

【讨论】：