Introduction à la fonction glisser vers la gauche pour supprimer sur le terminal mobile en utilisant JavaScript

J'ai récemment travaillé sur un projet qui nécessitait d'implémenter la fonction glisser vers la gauche pour supprimer sur le terminal mobile. À cette époque, le code js trouvé en ligne a été supprimé et optimisé. Ici, à travers cet article, je vais le partager. avec vous l'implémentation de la fonction left-swipe-to-delete sur le terminal mobile basé sur JS. Les amis intéressés peuvent nous rejoindre

Sans plus attendre, je posterai directement le code pour. vous. Le code spécifique est le suivant :

<p class="wrap pay-wrap" id="lists">
    @foreach (var item in Model)
    {
      <p class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.UID">
        <p class="pay-each" style="height:90px;margin-bottom:0; border-radius: 5px;">
          <p class="pay-order-teacher" style="background-image:url(@item.DiseaseInformation.ListPicPath);height:70px;border-radius:0" onclick="Turn(&#39;@item.DiseaseInfoID&#39;)"></p><p class="detailp" style="padding:0;padding-top:10px" onclick="Turn(&#39;@item.DiseaseInfoID&#39;)">
            @(item.DiseaseInformation.Title.GetSubstr(60))
          </p>
          <p style="height:20px;margin-right:10px;line-height:20px;vertical-align:middle" onclick="Turn(&#39;@item.DiseaseInfoID&#39;)">
            <span style="float:left;color: #808080;line-height:2;vertical-align:bottom;width:70%">来源：@(item.DiseaseInformation.Source)</span>
            <span style="float:left;color: #808080;line-height:2;vertical-align:bottom;width:30%"><img src="~/Content/img/yueduliang.png" style="height:20px" /> @(item.DiseaseInformation.BrowseNum)</span>
          </p>
          <p class="pay-order-swiper" style="height:90px;margin-left:15px;width:80px"><a href="javascript:;" rel="external nofollow" onclick="del(&#39;@item.UID&#39;)" class="btn btn-red pay-order-btn pay-order-del" style="height:90px;line-height:90px;width:105px;font-size:18px">删除</a>
          </p>
        </p>
      </p>
    }
  </p>

jquery.productswipe.js Code

/********************
 * 基于jquery模拟移动端列表左右滑动删除
 * author:yaohuitao@100tal.com
 * ******************/
function prevent_default(e) {
  e.preventDefault();
}
function disable_scroll() {
  $(document).on('touchmove', prevent_default);
}
function enable_scroll() {
  $(document).off('touchmove', prevent_default);
}
var mytouch = function (obj) {
  //滑动删除
  var Drags = {};
  Drags.dragtag = false;//拖动状态
  Drags.dragstart = true;//拖动开始标志
  Drags.datatransx = 0;
  $(obj)
    .on('touchstart mousedown', function (e) {
      if (!($(e.target).hasClass("pay-order-swiper") || $(e.target).parents().hasClass("pay-order-swiper"))) {
        closeallswipe();   //点击还原
        if (e.originalEvent.targetTouches) {
          Drags.dragx = e.originalEvent.targetTouches[0].pageX;
          Drags.dragy = e.originalEvent.targetTouches[0].pageY;
        } else {
          Drags.dragx = e.pageX;
          Drags.dragy = e.pageY;
        }
        if ($(e.currentTarget).attr("data-transX")) {
          Drags.datatransx = parseInt($(e.currentTarget).attr("data-transX"));
        }
        Drags.dragtag = true;
        Drags.dragstart = true;
      }
    })
    .on('touchmove mousemove', function (e) {
      if (Drags.dragtag) {
        $(e.currentTarget).removeClass('animatedh');
        $(e.currentTarget).addClass('dragstart');  //添加禁止选择
        var change = 0;
        if (e.originalEvent.targetTouches) {
          change = e.originalEvent.targetTouches[0].pageX - Drags.dragx;
          changey = e.originalEvent.targetTouches[0].pageY - Drags.dragy;
        } else {
          change = e.pageX - Drags.dragx;
          changey = e.pageY - Drags.dragy;
        }
        if (Drags.dragstart) {
          if (Math.abs(changey) < 20) {
            showswiperfbn();
          }
        } else {
          showswiperfbn();
        }
        function showswiperfbn() {
          if (Math.abs(change) > 20) {
            Drags.dragstart = false;
            if (change < -20) {
              change = change + Drags.datatransx + 20;
            } else {
              change = change + Drags.datatransx - 20;
            }
            change = Math.min(Math.max(-300, change), 0);
            $(e.currentTarget).css(&#39;transform&#39;, &#39;translate3D(&#39; + change + &#39;px,0px,0px)&#39;);
            $(e.currentTarget).attr("data-transX", change);
            disable_scroll();
          }
        }
      }
    })
    .on(&#39;touchend mouseup&#39;, function (e) {
      var left = parseInt($(e.currentTarget).attr("data-transX"));
      var new_left;
      if ($(e.currentTarget).hasClass("open")) {
        if (left > -110) {
          new_left = 0;
          $(e.currentTarget).removeClass(&#39;open&#39;);
        } else {
          new_left = -120;
        }
      } else {
        if (left < -20) {
          new_left = -120;
          $(e.currentTarget).addClass(&#39;open&#39;);
        } else {
          new_left = 0;
        }
      }
      $(e.currentTarget).removeClass(&#39;dragstart&#39;);
      $(e.currentTarget).css(&#39;transform&#39;, &#39;translate3D(&#39; + new_left + &#39;px,0px,0px)&#39;);
      $(e.currentTarget).attr("data-transX", new_left);
      $(e.currentTarget).addClass(&#39;animatedh&#39;);
      Drags.dragtag = false;
      enable_scroll()
    });
}
function closeallswipe() {
  $(&#39;.pay-list .pay-each&#39;).css(&#39;transform&#39;, &#39;translate3D(0px,0px,0px)&#39;);
  $(&#39;.pay-list .pay-each&#39;).removeClass(&#39;open&#39;);
  $(&#39;.pay-list .pay-each&#39;).addClass(&#39;animatedh&#39;);
  $(&#39;.pay-list .pay-each&#39;).attr("data-transX", 0);
}

la page est exécutée en utilisant mytouch($('.pay-list .pay-each'));

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!