Combination of jQuery Mobile taphold and jQuery UI draggable

Question

I am working on a mobile application where I am trying to combine jQuery UI draggable functions with jQuery Mobile taphold event. The idea is that the item becomes draggable when the chain is executed.

Draggable is initialized with elements in the following code:

$('div.rect', '#outerBox').draggable({ containment: "parent", grid: [50, 50], disabled: true, stop: function(event, ui) { $(this).draggable('disable'); $(this).removeClass('highlighted'); } }); 

As you can see, the drag and drop function is disabled initially because I want to enable it after the taphold event. For this, I am currently using the following code:

 // Bind long press event to rectangle elements $('div.rect', '#outerBox').bind('taphold', function(event, ui) { // Enable dragging on long press $(this).addClass('highlighted'); $(this).draggable('enable'); }); 

This works, but the problem is that in order to drag an element around, it is necessary to intercept the "release-and-tap-again" event, and not to drag it directly after the taphold event. Maybe this is some kind of interference problem? I tried things like event.preventDefault() , but my knowledge of jQuery events is not that much, so I have no idea if that really matters.

Any idea on how to solve this problem?

Answer 1

Firstly, jquery ui draggable does not work with touch events. I assume that you have made the necessary adjustments to fix this.

those. see jquery-ui sortable not working on touch devices based on Android or IOS

Further, I would say that the touchstart event does not occur due to how taphold was implemented in jQuery mobile.

A dragged object will only be launched if it receives a touchstart / mousedown event.

I saw something similar before, but with a double touch combined with draggable.

You may need to manually fire the touchstart event inside your taphold event handler to drag and drop to execute:

 $('div.rect', '#outerBox').bind('taphold', function(event, ui) { var offset = $(this).offset(); var type = $.mobile.touchEnabled ? 'touchstart' : 'mousedown'; var newevent = $.Event(type); newevent.which = 1; newevent.target = this; newevent.pageX = event.pageX ? event.pageX : offset.left; newevent.pageY = event.pageY ? event.pageX : offset.top; $(this).trigger(newevent); }); 

Answer 2

Although a little late - I got this to work by skipping the taphold plugin and using it instead. Remember to add Touch Punch !

 $('#whatever').on('touchstart', function (event) { var me = this; if (!me.touching) { if (me.touched) { clearTimeout(me.touched); }; me.touched = setTimeout(function () { //console.log('taphold'); //Prevent context menu on mobile (IOS/ANDROID) event.preventDefault(); //Enable draggable $this.draggable('enable'); //Set internal flag me.touching = true; //Add optional styling for user $(me).addClass('is-marked'); //trigger touchstart again to enable draggable through touch punch $(me).trigger(event); //Choose preferred duration for taphold }, 500); } }).on('touchend', function () { //console.log('touchend'); this.touching = false; //Disable draggable to enable default behaviour $(this).draggable('disable'); //Remove optional styling $(this).removeClass('is-marked'); clearTimeout(this.touched); }).on('touchmove', function () { //console.log('touchmove'); clearTimeout(this.touched); });