Question

我已经看到了这个我喜欢的代码，您可以通过滑动在一种列表视图中显示删除按钮，如下所示：http://ankane.github.io/swipeout/demo.html

现在我有一个以jsfiddle

之类的div显示的列表视图

<div id="maincontent">
    <div id="title">Title 1</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
        <div id="title">Title 2</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
    <div id="title">Title 3</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
    <div id="title">Title 4</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
body{margin:0;}
#maincontent{width:100%; height:81px; border-bottom:1px solid #ccc;}
#title{font-size:20px; float:left; margin-left:20px; margin-top:10px;}
#delbutton{float:right; margin-right:20px; margin-top:30px;}

我希望能够向右滑动并显示复选框，这是否可能？我希望它尽可能简单，没有太多的编码和混乱，但无法找到一个细长的版本。

任何人都有任何可以帮助我的想法吗？

Answer 1

首先，你的代码有错误，你使用id为maincontent和其他东西。重复一个元素时，你应该使用类（参见小提琴）。 Id的限制为每页一个（例如，一个#maincontent，一个#title等），无论如何，对于您的问题，这是一种方法：

http://jsfiddle.net/jonigiuro/QDH6Z/2/

当用户按下鼠标按钮（或触摸）时，脚本会检查光标位置：

element.on('mousedown', function(e) {
    self.startPosition = e.clientX;
});

并且当用户释放鼠标按钮

时也是如此

element.on('mouseup', function(e) {
    self.endPosition = e.clientX;
});

然后计算两个值之间的差值以查看用户是否已刷过：

if( self.endPosition - self.startPosition > threshold ) {
     self.currentElement.find('input').addClass('visible');
}

或者您可以使用像这样的jquery插件： https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

希望这会有所帮助

EDIT！上面的代码不起作用，因为我没有正确使用触摸事件。这是正确的小提琴：

http://jsfiddle.net/jonigiuro/QDH6Z/33/

element.on('touchstart', function(event) {
    element.find('input').removeClass('visible'); //hide all the checkboxes when the swipe begins
    self.startPosition = event.originalEvent.changedTouches[0].pageX;
});

滑动以显示复选框

1 个答案: