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

Question

请参阅下面的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",
});

Answer 1

由于我无法添加评论，我希望你不要否决我，因为这只是根据我自己的经验提出的建议。

尝试使用https://github.com/furf/jquery-ui-touch-punch.
不久前，我需要像你一样创建一些东西，并使其与所有移动设备兼容，这帮了我很大的忙。