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