基于移动端的左滑删除

 <div class="wrap pay-wrap" id="lists">
        @foreach (var item in Model)
        {
            <div class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.UID">
                <div class="pay-each" style="height:90px;margin-bottom:0; border-radius: 5px;">
                    <div class="pay-order-teacher" style="background-image:url(@item.DiseaseInformation.ListPicPath);height:70px;border-radius:0" onclick="Turn('@item.DiseaseInfoID')"></div><div class="detaildiv" style="padding:0;padding-top:10px" onclick="Turn('@item.DiseaseInfoID')">
                        @(item.DiseaseInformation.Title.GetSubstr(60))
                    </div>
                    <div style="height:20px;margin-right:10px;line-height:20px;vertical-align:middle" onclick="Turn('@item.DiseaseInfoID')">
                        <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>
                    </div>
                    <div class="pay-order-swiper" style="height:90px;margin-left:15px;width:80px"><a href="javascript:;" onclick="del('@item.UID')" class="btn btn-red pay-order-btn pay-order-del" style="height:90px;line-height:90px;width:105px;font-size:18px">删除</a>
                    </div>
                </div>
            </div>
        }

    </div>

jquery.productswipe.js代码

/********************
 * 基于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('transform', 'translate3D(' + change + 'px,0px,0px)');
                        $(e.currentTarget).attr("data-transX", change);
                        disable_scroll();
                    }
                }
            }
        })
        .on('touchend mouseup', 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('open');
                } else {
                    new_left = -120;
                }
            } else {
                if (left < -20) {
                    new_left = -120;
                    $(e.currentTarget).addClass('open');
                } else {
                    new_left = 0;
                }
            }
            $(e.currentTarget).removeClass('dragstart');
            $(e.currentTarget).css('transform', 'translate3D(' + new_left + 'px,0px,0px)');
            $(e.currentTarget).attr("data-transX", new_left);
            $(e.currentTarget).addClass('animatedh');
            Drags.dragtag = false;
            enable_scroll()
        });
}
function closeallswipe() {
    $('.pay-list .pay-each').css('transform', 'translate3D(0px,0px,0px)');
    $('.pay-list .pay-each').removeClass('open');
    $('.pay-list .pay-each').addClass('animatedh');
    $('.pay-list .pay-each').attr("data-transX", 0);
}

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