desktop电脑上访问页面可以很好的通过鼠标事件来实现drag & drop拖放功能,可是如何在触摸屏上来实现这个功能?

首先:有没有这个需求?

来自下面链接的讨论 http://stackoverflow.com/questions/3382393/html5-drag-and-drop-api-on-touch-screen-devices 有一种观点就是: 没有必要,至少不必须。最好的解决办法就是面向设备设计两套UI。

Touch and drag/drop do not really play nicely together. Consider that for drag and drop you have an implied mouse-down => mouse-move => mouse-up sequence of events. In a touch environment you have not only the standard touchstart, touchmove and touchend events but you also have actual gestures that have specific meanings on varous platforms. These gestures are combinations of touch events, their order and their timing.

So how would you drag an element using touch? By capturing the touchstart and touchmove? No. Due to the fat-finger problem, almost every touch event has both a touchstart and touchmove. You can also have two touchstarts with only one touchmove occasionally with a dirty screen.

How about capturing touchstart and then waiting to see if the user has moved a certain distance? Nope, the problem there is that the user will see the 'glitch' when he has moved his finger 15 pixels (or whatever distance) and nothing happens and then the element suddently snaps to his finger position. The normal reaction is to lift the finger, which in this scenario would initiate a drop, the wrong answer.

In the end, trying to develop an interface where some elements are stationary and others can, but don't have to be, draggable is trying to fit a desktop environment into a touch device. The paradigms do not fit.

其次:如果非要这么做怎么办?

触摸屏设备与desktop桌面设备最明显的区别就是没有鼠标,所以没有鼠标事件(mouseover, mousedown, mousemove,mouseout ); 而现有的drag & drop 拖放功能的实现都是基于鼠标事件的;而触摸屏设备只有触摸事件(touch event: touchstart, touchmove, touchend)等事件。所以如果非要做,可能需要通过来map这两类事件做一个模拟事件;既然是模拟,必然有相似程度,或许不能完全等同,看需求。

贴个链接这边,这是一个jquery UI 插件Touch Punch。这个插件就做了上面的一些事情。没有试过,有时间试试看,或者感兴趣的朋友试试后告诉我。:)

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.

http://touchpunch.furf.com/

发表评论