2013-02-22 64 views
4

請參見下面的的jsfiddle:滾動使用在iPad jQuery UI的可拖動和jQuery觸摸衝牀名單不能正常工作

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

回答

1

正如我不能添加評論我希望你不要downvote我,因爲這是唯一的一個基於我自己的經驗提出的建議。

嘗試使用https://github.com/furf/jquery-ui-touch-punch
前段時間我需要創建和你一樣的東西,並使其與所有移動設備兼容,這對我有很大的幫助。

相關問題