Detecting Longpress

[ttseng]

I would like to enable draggable elements on my page on a longpress. I tried implementing this using mouseup and mousedown in javascript as follows:

  $('.stepNode').mouseup(function(){
              // console.log('clear timing');
              clearTimeout(pressTimer);
              $('.stepNode').draggable('disable');
              $('body').tap();
              return false;
            }).mousedown(function(){
                element = $(this);
              pressTimer = window.setTimeout(function(){
                // console.log('enabling dragging');
                makeCurrentStep(element);
                $('.stepNode').draggable('enable');
              }, 500);
              return false;
            });

You can check that this works on a desktop here: http://bip-android-test.herokuapp.com/projects/776/steps/mobile?auth_token=yC7dCCh8Lfkr8CxLfZ4Z&tree_width=2
The block that you long click on becomes highlighted in yellow after a short delay and becomes draggable.

But when I check it on mobile, the mousedown event doesn't seem to be registered on a long press.

Is there a way to implement long press using jquery-ui-touch-punch?

[boxystudio]

I would also LOVE to know a way to implement this. Otherwise, when you try to scroll the page you end up dragging and dropping items you don't mean to drag and drop.

[brchristian]

👍

[bhofstaetter]

+1

[liamjohnston]

+1

[jayagl]

+1

[jayagl]

I've created a pull request which implements this using a global touchPunchDelay property