DavideR DavideR - 1 month ago 13
jQuery Question

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?

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

Answer

Just in case someone needs this:

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.

Comments