2

In our app we want to drop from one list to over. Problem is, when there are many items in list - it's impossible to scroll when elements are dragable.

As workaround we want to disable drag-ability of elements and enable it only when user makes a long tap on an element.

    $('li').bind('taphold', function (event, ui) {
        console.log('taphold');
        clearAll(); // clearing all other catched
        $(this).addClass('catched')
        $(this).draggable('enable');
    });

here is jsfiddle https://jsfiddle.net/nrxaqc34/10/

So far it works, but user needs to tap once more in order to drag. And would be nice if user could start dragging right after long tap.

This answer here https://stackoverflow.com/a/9922048/582727 doesn't work on iOS.

Maybe someone has an idea.

Community
  • 1
  • 1
Daniel
  • 1,364
  • 1
  • 11
  • 18

1 Answers1

2

Does it make sense to use delay option? http://api.jqueryui.com/draggable/#option-delay

$("li").draggable().draggable( "option", "delay", 2000);

Fiddle: https://jsfiddle.net/dob3uegj/

EDIT: jqueryui-touch-punch (http://touchpunch.furf.com/) added to fiddle for smartphone simulations: https://jsfiddle.net/dob3uegj/1/

Gjermund Dahl
  • 1,410
  • 17
  • 25
  • interesting approach, but unfortunately list doesn't scroll https://jsfiddle.net/jc9gda2w/1/ – Daniel Mar 16 '16 at 13:16
  • 1
    Updated fiddle: https://jsfiddle.net/jc9gda2w/6/ I removed the touchpunch library and added a few code lines. – Gjermund Dahl Mar 16 '16 at 14:43
  • looks very promising. maybe you know how it can be signaled to user, that he can drag? i tried in draggable.start but it works only after user drags element https://jsfiddle.net/jc9gda2w/8/ – Daniel Mar 16 '16 at 14:58
  • sorry I wasn't patient and found the solution for prev, comment, by adding some code to Your event handler https://jsfiddle.net/jc9gda2w/11/ – Daniel Mar 16 '16 at 15:22