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

Drag & Drop on IPad Web App - while remaining Scroll functionality

本文关键字：保留 滚动 功能 拖放 iPad Web App      更新时间：2023-09-26

我正在使用Jquery UI拖放（http://jqueryui.com/demos/draggable）以及 https://github.com/furf/jquery-ui-touch-punch将触摸事件映射到鼠标事件。到目前为止，整个拖放操作运行良好。

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

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

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

有没有人遇到过类似的问题，并愿意分享对此的想法？是否有其他移动Web框架（如Sencha或JQmobile）配备了这样的功能？

提前感谢...

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

以下是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/

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

最后，我只需要调整event.preventDefault();以重新启用 scolling。

编辑

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

相关文章：