2013-02-22 66 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
前段时间我需要创建和你一样的东西,并使其与所有移动设备兼容,这对我有很大的帮助。

相关问题