javascript - 在 iPad Web App 上拖放 - 同时保留滚动功能

Question

我正在使用 Jquery UI 拖放 ( http://jqueryui.com/demos/draggable ) 和 https://github.com/furf/jquery-ui-touch-punch将触摸事件映射到鼠标事件。到目前为止，整个拖放操作都很好。

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

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

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

有没有人遇到过类似的问题并愿意分享一些想法？Sencha 或 JQmobile 等其他移动网络框架是否具备此类功能？

提前致谢...

Answer 1

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

这是 jQuery UI 的文档示例:

<div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">drag with handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
    <p>drag from content</p>
    <p class="ui-widget-header">not drag with handle</p>
</div>

$("#draggable").draggable({handle:"p"});
$("#draggable2").draggable({cancel:"p.ui-widget-header"});

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

http://jsfiddle.net/Dn9DX/