1

I am trying to build a list of draggables but the drag event somehow interferes with the scroll event on mobile devices (tested on a windows tablet, on desktop pcs it works fine). I can either scroll or drag but not both. If I set "-ms-touch-action" and "touch-action" to none, I can scroll, if I don't set it, I can drag.

Touch-punch is included as well. I think, the best way to solve this problem would be triggering the drag event by holding the item for one or two seconds, but I can't get that to work.

It is important that the overflow of the list is set to visible on start and back to '' on stop, because I have to drag the items out of the divs boundaries and my application doesn't allow me to do it in any other way.

You can test the code here: http://jsfiddle.net/LQuyr/344/

Hope you guys can help me. Thanks.

// draggable
$('#sortable li').draggable({
  scroll: false,
  helper: 'clone',
  start: function(e, ui) {
    $('#sortable').css('overflow', 'visible');
  },
  stop: function(e, ui) {
    $('#sortable').css('overflow', '');
  }
});
LLO
  • 31
  • 3

1 Answers1

0

Maybe the delay option is what you're looking for...

$('#sortable li').draggable({
      delay: 300,
      scroll: false,
      helper: 'clone',
      start: function(e, ui) {
        $('#sortable').css('overflow', 'visible');
      },
      stop: function(e, ui) {
        $('#sortable').css('overflow', '');
      }
    });
M. Blum
  • 1
  • 2