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

Posted 2023-05-08

【中文标题】在 iPad Web App 上拖放 - 同时保留滚动功能

【英文标题】：Drag & Drop on IPad Web App - while remaining Scroll functionality

【发布时间】：2012-08-12 14:30:13

【问题描述】：

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

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

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

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

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

提前谢谢...

【参考方案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/

【讨论】：

感谢您的回答...我试图使 元素内的 可拖动，但这不是所需的 UI 设计。整个 应该是可拖动和可滚动的......

您的 ul 标签是否使用了 iPad 宽度的 100% ？使用类似于他们在 .slider() 演示页面上所做的事情怎么样：jqueryui.com/demos/slider/#side-scroll 这个简单的滚动条示例可能是一个巧妙的解决方法。另一种解决方法是添加一个按钮以使整个事物可拖动或不可拖动，但这又取决于您的应用程序应该做什么......

不，它只喜欢横向视图的 20%。有 2 个带有拖动元素的可滚动列表和 60% 宽度的画布放置区或多或少

【参考方案2】：

我通过切换 https://github.com/furf/jquery-ui-touch-punch 解决了这个问题 此解决方案中的代码：javascript Drag and drop for touch devices。

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

编辑

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

【讨论】：

我发现如果你将 event.preventDefault() 包装在一个 if 语句中，只导致它在 mousemove 上触发，那么它可以防止任何其他事件类型的阻塞问题。

你能发布一个你工作的javascript的jsfiddle例子吗？目前尚不清楚需要进行哪些修改。

添加了我的解决方案

我在 iPhone 中打开了 jsfiddle，并放大了“元素 1”div 位于页面顶部和底部，以测试滚动。我发现触摸元素并滚动不会滚动 - 它会移动元素。我可能误解了，但我认为这个想法是在触摸可拖动 div 时允许滚动，并且只有在 div 被触摸一段时间时才拖动。

此外，您可能希望防止 ui-sortable 在拖动时滚动，例如通过在拖动时添加一个 css 类。