在 iPad 上使用 jQuery UI Draggable 和 jQuery Touch Punch 滚动列表无法正常工作答案

【问题标题】：Scrolling a list using jQuery UI Draggable and jQuery Touch Punch on an iPad is not working properly在 iPad 上使用 jQuery UI Draggable 和 jQuery Touch Punch 滚动列表无法正常工作
【发布时间】：2013-02-22 18:28:06
【问题描述】：

请参阅下面的 jsfiddle：

jsfiddle

在桌面浏览器上查看此内容时，滚动会按我的预期工作。您可以使用滚动条滚动列表，也可以单击并拖动框而不滚动列表。

当我尝试在 iPad 上滚动此列表时出现问题。每次您触摸列表中的一个框时，它都已设置为可拖动，因此您无法在列表中滑动并简单地拖放其中一个。

有人对我如何使它工作有任何建议吗？也许是替代解决方案？

提前致谢。

HTML：

<div id="scroller">
    <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107"
    data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
    <div class="color" style="background-color: rgb(107, 163, 93);"
    data-r="107" data-g="163" data-b="93"></div>
</div>

CSS：

#scroller {
    width: 317px;
    height: 325px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.color {
    margin:5px;
    width: 100px;
    height: 100px;
}

JS：

$(".color").draggable({
    scroll: false,
    helper: "clone",
});

【问题讨论】：

标签： javascript jquery jquery-ui-draggable

【解决方案1】：

由于我无法添加评论，因此希望您不要对我投反对票，因为这只是根据我自己的经验提出的建议。

尝试使用https://github.com/furf/jquery-ui-touch-punch。
前段时间，我需要像您一样创建一些东西，并使其与所有移动设备兼容，这很有帮助。

【讨论】：