Как подражать Gmail «Проведите по удалению» в KendoUI? Пример включен

Question

Я пытаюсь воссоздать интерфейс Gmail (на Android) «проведите пальцем по удалению». В этом графическом интерфейсе пользователь может

• Проведите пальцем влево или коснитесь вправо, и весь элемент списка перемещается большим пальцем.
• После того, как он проскользнул более чем на расстояние X, предмет удаляется и заменяется значком «отменить».
• Освобождение строки, если расстояние X не достигнуто, должно помещать объект в исходное место.
• Если второй элемент прокручен, а поле отмены отображается по предыдущему экрану, эта строка удаляется, а анимация и логика начинаются с нуля.

У меня есть демо-версия этой работы здесь, но, похоже, она не работает слишком хорошо. http://jsbin.com/EWUbeTI/2/edit

Есть ли более эффективный способ обработки этой анимации?

Answer 1

Это в первую очередь касается позиционирования и обработки множества событий касания. Есть два divs, расположенных друг над другом. Каждый из них абсолютно свободен, чтобы снять это.

Топ Див (E-mail) При возникновении сопротивления, верхний DIV изменяет свою левую позицию по тормозной дельте ПЧА, что дельта является отрицательной (перемещение влево) и текущее левое значение строки не больше, чем 0 (предотвращает правильное перетаскивание). Когда перетаскивание останавливается, если строка была перемещена не менее чем на 25% от ширины контейнера, мы предполагаем, что пользователь хочет зафиксировать, и мы продвигаемся вперед и сдвигаем его полностью. В противном случае мы ставим его левый назад на ноль, а затем оживляем его назад в качестве отмененного сопротивления.

Нижнее Div (Архив) Нижний div не перемещается, но обрабатывает прикосновение к области. Если на кнопке появляется касание, элемент рухнет (вы также можете сдвинуться). Для плавного сжимания вам необходимо удалить накладные наборы kendo ui на элементе.

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

ПРИМЕЧАНИЕ: Эта реализация очень специфичны для IOS 7 кожи и не будут работать прямо с другими из-за специфического CSS стайлинга

Надеюсь, это поможет вам двигаться в правильном направлении.