在IPad Web App上拖放 – 同时保留Scrollfunction

我正在使用Jquery UI Drag and Drop（ http://jqueryui.com/demos/draggable ）和https://github.com/furf/jquery-ui-touch-punch将触摸事件映射到鼠标事件。 到目前为止，整个拖放工作正常。

我现在遇到的问题是我有一长串可拖动元素，我需要能够在IPad上滚动列表…当我使列表元素可拖动时，这将不再起作用。

我尝试使用jqueryui提供的约束，如distance和delay – 但即便如此，滚动事件似乎完全禁用/覆盖拖动事件。

我可能需要编写一个自定义函数，例如“只有向左移动至少50像素使其可拖动”或其他东西。

有没有人遇到类似的问题，并愿意分享关于它的som想法？ 是否有像Sencha或JQmobile这样的其他移动Web框架都配备了这样的function？

提前致谢…

Answer 1

当然，这取决于您的设计，但您可以尝试使用手柄。

这是jQuery UI的文档示例：

 
 
drag with handle
 
 
 
drag from content
 
not drag with handle
 
 $("#draggable").draggable({handle:"p"}); $("#draggable2").draggable({cancel:"p.ui-widget-header"}); 

或者至少取消选项可以给你一个开始。

http://jsfiddle.net/Dn9DX/

Answer 2

我通过从https://github.com/furf/jquery-ui-touch-punch切换到此解决方案中的代码解决了这个问题： Javascript拖放触摸设备 。

最后，我需要调整的是删除event.preventDefault(); 重新启用scolling。

编辑

基本上我使用了我链接的第二个答案的代码 – 进行了一些调整。 这是我的解决方案的JS小提琴，希望它有所帮助： http ： //jsfiddle.net/LQuyr/8/