Search code examples
jquerytouchdragconflict

Drag & Drop, touch events and scroll on a web page

I'm using jQuery UI drag and drop widget. But there's one problem - we have a lot of draggable blocks on the page. So browsers in mobile devices (with touch screens) starts drag some elements when user tries scrolling the page.

How this conflict could be resolved?

Solution

  • I can think of 3 solutions...

    Drag & drop when touching the blocks and scroll when touching elsewhere;

    Add a scroll bar; or

    Scroll depending on the device inclination based on sensor data.