jQuery UI可拖动和页面滚动（在移动设备上） [英] jQuery UI Draggable and Page Scrolling (on mobile)

问题描述

我有一个装满可拖动项目的页面（仅限横向）。

I have a page full of draggable items (only in horizontal).

如果我在触摸设备上打开我的页面，我无法向下滚动页面，显然因为页面充满了可拖动的元素。如何让页面再次滚动？

If I open my page on a touch device I can't scroll the page down, obviously because the page is full of draggable elements. How can I make the page scrollable again?

这是我正在使用的draggable（）代码：

Here's the draggable() code I'm using:

$('li').draggable({
axis: 'x',
drag: function( event, ui ) {
    if(ui.position.left > 0)
        ui.position.left = 0;
    if(ui.position.left < -250)
        ui.position.left = -250;
}
});

推荐答案

万一有人需要这样的：

使用draggable（）的handle选项可以解决问题。
例如，如果我有一个宽度为500px的div，我可以插入另一个（透明）div，它在右边对齐（例如）并且宽度为250px。然后我将最后一个div设置为可拖动div的句柄。

The problem can be solved by using the "handle" option of draggable(). For example, if I have a div with a width of 500px, I can insert another (transparent) div inside it aligned to the right (for example) and with a width of 250px. Then I set this last div as the handle of the draggable div.

这篇关于jQuery UI可拖动和页面滚动（在移动设备上）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！