Jquery在手機上左右滑動

Question

我想用jquery mobile左右滑動。當我點擊左側的刷卡時，打開抽屜，右側關閉抽屜。目前我按上面的按鈕和菜單功能是用來打開菜單我想通過使用jquery中的滑動功能來做到這一點。請幫助

的Html的div：

<div class="DinM-navbar-header "> 
     <img src="" data-target=".DinM-navbar-collapse" data-toggle="collapse" class="DinM-navbar-toggle" alt="menu-icon" /> 
    </div> 
    <div class=""> 
     <%=HTML %> 
    </div> 

JavaScript函數：

function ShowMenu() { 
      var mainmenu = $(".DinM-main-menu"); 
      if (($(window).width() <= 991 && mainmenu.parent().attr('id') != "mobile")) { 
       $("#main-wrapper").animate({ 
        left: "0px" 
       }); 
       $("#mobile").html(mainmenu.clone()); 
       $(".DinM-main-menu", $(".DinM-top-menu")).remove(); 
       $(".DinM-main-menu").css("z-index", "-1").hide(); 
       $("#main-wrapper").css("min-height", $(".DinM-main-menu").height()); 
      } else if ($(window).width() > 992 && mainmenu.parent().attr('id') == "mobile") { 
       mainmenu.insertAfter($(".DinM-navbar-header ")); 
       mainmenu.show(); 
       $("#mobile").html(''); 
      } 

$(document).ready(function() { 
     $("body").wrapInner("<div id='main-wrapper' class='content-left' ></div>").append("<div id='mobile' ></div>"); 
     $(".DinM-main-menu").removeClass('DinM-hide'); 
     ShowMenu(); 
    }); 

Answer 1

https://api.jquerymobile.com/swipeleft/

https://api.jquerymobile.com/swiperight/

向左滑動事件：

jQuery(window).on("swipeleft", function(event) 
    { 
    hideMenu(); 
    }); 

向右滑動，即可事件：

jQuery(window).on("swiperight", function(event) 
{ 
    ShowMenu(); 
}); 

Answer 2

很老的問題，但它可以幫助別人誰想要一個簡單的代碼來獲得交換事件在JavaScript中，沒有任何依賴性。希望它能幫助別人。

在 swipe.js

簡單

見腳本的HTML標記來使用：

<div id="touchsurface1" class="touchsurface" onSwap="touchsurfaceSwap(event)"></div> 

在JavaScript中使用：

touchsurface = document.getElementById('touchsurface2'); 
touchsurface.addEventListener("swap", function(event){alert('Swaped ' + event.detail.direction + ' at ' + event.target.id);}, false); 

演示頁：https://vikylp.github.io/swipe/