如何在Kendo UI中模仿Gmail“滑动删除”？示例包括

Question

我正在尝试重新创建Gmail（在Android上）“轻扫删除”界面。在此GUI中，用户可以

• 向左滑动或向右滑动，整个列表项随拇指移动。
• 滑动超过X距离后，项目会甩开并被替换为“撤消”图标
• 释放行，如果尚未达到X距离，则应将对象放在原来的位置。
• 如果刷了第二个项目，并且从之前的滑动中显示了撤消框，则该行将被删除，动画和逻辑将从头开始。

我有一个在这里工作的演示，但它似乎表现不太好。 http://jsbin.com/EWUbeTI/2/edit

有没有更有效的方法来处理这个动画？

Answer 1

这个主要是关于定位和处理大量触摸事件。有两个div放在一起。每个人都绝对有能力将其拉下来。

Top Div（电子邮件） 当发生拖动时，顶部div通过拖曳增量IF改变其左侧位置，其中增量为负（向左移动）并且该行的当前左值不大于0（防止右拖动）。当拖动停止时，如果行已经移动了容器宽度的至少25％，我们假设用户想要提交，我们继续并将其一直滑动。否则我们将其左侧设置为零，然后将其设置为取消拖动动画。

底部Div（存档） 底部div不移动，但处理区域的触摸。如果按钮上发生触摸，则项目将折叠（您也可以滑动）。平滑折叠需要您删除元素上的padding kendo ui移动设置。

http://jsbin.com/AfoQUKoQ/2/edit

注意：此实现非常特定于iOS 7皮肤，并且由于特定的CSS样式而无法与其他人一起使用

希望这能让你朝着正确的方向前进。