滑动删除iOS中的JavaScriptbutton？

我在Safari的iPod上只是在Facebook上，无论何时你正在使用Messenger，并且在任何消息上向右/左滑动，都会出现一个删除button。

有人可以指导我，可能告诉我如何在HTML / JS / jQuery中完成？

非常感谢！

Answer 1

我不知道jQuery手机，这将是一个更简单的方法来做到这一点，但以下是如何可以在普通的醇'JS：

document.body.addEventListener('touchstart',function(e) { e = e || window.event;//don't know how mobile browsers behave here var startCoordinates = {x:e.changedTouches[0].clientX, y:e.changedTouches[0].clientY}; var endHandler = function(e) { e = e || window.e; var xDiff = Math.abs(Math.abs(startCoordinates.x) - Math.abs(e.changedTouches[0].clientX)); //unbind handler, avoid double listeners document.body.removeEventListener('touchend', endHandler, false); if (xDiff >= 50) {//assume small movement wasn't intended as swipe //here a swipe was detected if (confirm('Are you sure you want to delete X?')) {//perform xhr request here, or whatever } } }; document.body.addEventListener('touchend',endHandler,false); },false); 

jQmobile可能会容易得多，但这是我认为的基本思想，适用于我为Android（iOS，iOS，iOS）编写脚本的所有移动浏览器，甚至支持触摸事件的开发模式下的Chrome这样的代码）。

更新：
增加了代码，专门处理swipe：

 (function(G,und) { 'use strict'; var load = function() { var tStart, body = document.body; tStart = function(e) { e = e || G.event; var coords = e.changedTouches[0].clientX, tEnd = function(e) { e = e || G.event; var currentX = e.changedTouches[0].clientX; if (body.removeEventListener) { body.removeEventListener('touchend',tEnd,false); } else {//shouldn't be possible, but I don't know all browsers, of course body.detachEvent('ontouchend',tEnd); } if ((coords - currentX) <= 50) {//too little movement /*console.log*/alert('moved, but no real swipe'); } else { /*console.log*/alert('SWIIIPEEE!'); } }; if (body.addEventListener) { return body.addEventListener('touchend',tEnd,false); } body.attachEvent('ontouchend',tEnd); }; if (G.removeEventListener) { body.addEventListener('touchstart',tStart,false); return G.removeEventListener('load',load,false); } body.attachEvent('ontouchstart',tStart); return G.detachEvent('onload',load); }; if (G.addEventListener) { return G.addEventListener('load',load,false); } return G.attachEvent('onload',load); }(this)); 

Answer 2

我创build了一个Javascript库来做到这一点 – 今天刚刚发布！ https://github.com/ankane/swipeout

Answer 3

这将允许用户轻扫和点击;

这是与bootstrap结合使用的样式和淘汰赛的绑定（但这是可选的，不在本演示中使用）。

在iOS和Android （cordova应用程序）上工作和testing。 由于我的数组有重要的信息，我决定轻扫以显示删除button，然后允许用户单击此button。 这将作为用户做出删除这个决定的用户。

此外，我使用这个代码不只是删除适当的样式的插件button（“btn成功”等）。

jquery库的扩展需要是' jquery.event.move '（ https://github.com/stephband/jquery.event.move ）

HTML：

 <div class="col-xs-12 btn-group-vertical"> <!-- ko foreach: Alert --> <a class="btn btn-lg btn-default mySwipe" role="button" style="height:45px;float:left;">This is also test</a> <button class="btn btn-lg btn-danger btn-addOn" style="width:0px;display:none;right:0px;height:45px;margin-top:0px;padding:10px;">Delete Alert</button> <!-- /ko --> </div> 

JS：

这将被调用每次数组更改（swipeButton（'。mySwipe'）;）

 // THIS FUNCTION APPLIES THE SWIPE DELETE LOGIC TO LIST ITEMS (.btn) function swipeButton(elementIdentifier) { $(elementIdentifier).on('movestart', function (e) { // If the movestart is heading off in an upwards or downwards // direction, prevent it so that the browser scrolls normally. if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) { e.preventDefault(); } else { if (e.distX < 0) { // Left $(e.currentTarget).css('border-bottom-right-radius', '0px'); $(e.currentTarget).css('border-top-right-radius', '0px'); } } }).on('move', function (e) { var item = $(e.currentTarget); var total = item.parent().width(); var btn = $(e.currentTarget.nextElementSibling); if (e.distX < 0) { // Left var distance = e.distX * -1; distance = distance > 120 ? 120 : distance; btn.show(); // Move var itemWidth = total - distance; var btnWidth = distance < 35 ? 0 : distance; if (btnWidth == 0) { btn.hide(); itemWidth = total; } item.css('width', itemWidth + 'px'); btn.css('width', btnWidth + 'px'); } else { //Right var distance = e.distX; distance = distance > 120 ? 120 : distance; var currentWidth = item.width(); // Move var thisMove = e.deltaX == 0 ? distance : e.deltaX; var itemWidth = currentWidth + thisMove; itemWidth = itemWidth > total ? total : itemWidth; var btnWidth = total - itemWidth; btnWidth = btnWidth < 14 ? 0 : btnWidth; if (btnWidth == 0) { btn.hide(); itemWidth = total; } item.css('width', itemWidth + 'px'); btn.css('width', btnWidth + 'px'); } }).on('moveend', function (e) { var total = $(e.currentTarget).parent().width(); var itemWidth = $(e.currentTarget).width(); if (itemWidth == total) { // End Right $(e.currentTarget).css('border-bottom-right-radius', ''); $(e.currentTarget).css('border-top-right-radius', ''); var btn = $(e.currentTarget.nextElementSibling); btn.hide(); } }); } 

此代码的工作演示： http : //jsfiddle.net/3d9n9cdo/5/