利用JavaScript实现移动端左滑删除功能介绍-js教程-PHP中文网

利用JavaScript实现移动端左滑删除功能介绍

巴扎黑

发布： 2017-08-14 14:01:58

原创

1729人浏览过

最近做个项目，需要实现移动端左滑删除功能，当时js代码将网上找的进行删减优化，下面通过本文给大家分享基于js实现移动端左滑删除功能，感兴趣的朋友一起看看

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<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="max-width:90%" / alt="利用JavaScript实现移动端左滑删除功能介绍" > @(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代码

/********************
 * 基于jquery模拟移动端列表左右滑动删除
 * author:yaohuitao@100tal.com
 * ******************/
function prevent_default(e) {
  e.preventDefault();
}
function disable_scroll() {
  $(document).on(&#39;touchmove&#39;, prevent_default);
}
function enable_scroll() {
  $(document).off(&#39;touchmove&#39;, prevent_default);
}
var mytouch = function (obj) {
  //滑动删除
  var Drags = {};
  Drags.dragtag = false;//拖动状态
  Drags.dragstart = true;//拖动开始标志
  Drags.datatransx = 0;
  $(obj)
    .on(&#39;touchstart mousedown&#39;, 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(&#39;touchmove mousemove&#39;, function (e) {
      if (Drags.dragtag) {
        $(e.currentTarget).removeClass(&#39;animatedh&#39;);
        $(e.currentTarget).addClass(&#39;dragstart&#39;);  //添加禁止选择
        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);
}

登录后复制

页面使用执行mytouch($('.pay-list .pay-each'));