4

以下のjsfiddleを参照してください。

jsfiddle

デスクトップブラウザでこれを表示すると、期待どおりにスクロールが機能します。スクロールバーを使用してリストをスクロールでき、リストをスクロールせずにボックスをクリックしてドラッグできます。

iPadでこのリストをスクロールしようとすると、問題が発生します。リスト内のボックスをタッチするたびに、すでにドラッグ可能に設定されているため、リストをスワイプしてそのうちの1つをドラッグアンドドロップすることはできません。

誰かがこれを機能させる方法について何か提案がありますか？多分代替ソリューション？

前もって感謝します。

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",
});
4

1 に答える 1

1

コメントを追加できないため、これは私自身の経験に基づく提案にすぎないため、私に反対票を投じないでください.

https://github.com/furf/jquery-ui-touch-punchを使用してみてください。
少し前に、あなたのようなものを作成し、すべてのモバイル デバイスと互換性を持たせる必要がありましたが、これは非常に役立ちました。

于 2014-02-21T20:58:53.973 に答える