javascript - 滑动以显示复选框

Question

我看过我喜欢的这段代码，它使您可以滑动以在一种 ListView 中显示删除按钮，如下所示:http://ankane.github.io/swipeout/demo.html

现在我在 div 中显示了一个 ListView ，如下所示 jsfiddle

<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 用于主要内容和其他内容。当重复元素时，您应该改用类(参见 fiddle )。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

希望对你有帮助

编辑!上面的代码不起作用，因为我没有正确使用触摸事件。这是正确的 fiddle :

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;
});