HTML5 Drag and Drop API на устройствах с сенсорным экраном - PullRequest
Новая
       23

HTML5 Drag and Drop API на устройствах с сенсорным экраном

27 голосов
/ 01 августа 2010

Мне просто интересно, включает ли HTML5 API для перетаскивания поддержку сенсорных экранов.

Я думал об iPhone, но знаю, что это пока не поддерживается. Мне было интересно, если это только догоняет Apple, поддерживающую перетаскивание HTML5 на Safari для мобильных устройств, но я также подумал, что API HTML5 недостаточно для этого, но я очень сомневаюсь в этом.

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

Есть мысли?

Ответы [ 3 ]

10 голосов
/ 21 ноября 2011

Старая тема, но так как у меня есть некоторый опыт, и это все еще проблема, я попробую ...

Касание и перетаскивание не очень хорошо сочетаются друг с другом.Учтите, что для перетаскивания вы подразумеваете последовательность событий mouse-down => mouse-move => mouse-up.В сенсорной среде у вас есть не только стандартные события touchstart, touchmove и touchend, но и реальные жесты, которые имеют определенные значения на различных платформах.Эти жесты представляют собой комбинации событий касания, их порядка и времени.

Так как бы вы перетащили элемент с помощью касания?Захватить сенсорный запуск и сенсорный ход?Нет. Из-за проблемы с толстым пальцем почти каждое сенсорное событие имеет как сенсорный запуск, так и сенсорное движение.У вас также может быть два сенсорных пуска только с одним сенсорным движением, иногда с грязным экраном.

Как насчет захвата сенсорного пуска и последующего ожидания, если пользователь переместился на определенное расстояние?Нет, проблема в том, что пользователь увидит «сбой», когда он переместит свой палец на 15 пикселей (или на любое другое расстояние), и ничего не произойдет, а затем элемент внезапно зафиксируется в своем положении пальца.Нормальная реакция - поднять палец, что в этом случае может привести к падению, неправильный ответ.

В конце, попытка разработать интерфейс, где некоторые элементы являются стационарными, а другие могут, но не могут.Должно быть, Draggable пытается вписать среду рабочего стола в сенсорное устройство.Парадигмы не подходят.

Лучше смотреть на различные сенсорные рамки и использовать встроенные жесты.

8 голосов
/ 30 августа 2010

Есть некоторые собственные события HTML5, которые работают в WebKit (Chrome & Safari) ... только мобильные версии.Название этих событий: touchstart, touchmove, touchend, touchcancel

Пример перемещения элемента: 

$(document).bind("touchstart", function(e) {
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;

$("#element").css({top: y, left: x});
});

Дополнительная информация: https://developer.apple.com/documentation/webkitjs/touchevent

BTW Iпредпочитаю работать с webkit-transform (свойствами CSS), потому что он имеет лучшую производительность.

2 голосов
/ 01 июня 2013

Имея ту же проблему, вот пара бесплатных решений:

http://touchpunch.furf.com/

https://www.createjs.com/demos/easeljs/draganddrop

...