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