jquery ui drag and drop not work on mobile

Question

I am trying to design an application using Phonegap, JQuery UI , JQuery mobile and I want to drag and drop but I don't know why my code doesn't work on mobile. It works fine on browser but when I run it on mobile it's not working.

Here is my code

Html code :

<div class="mathheader"  align="center" id="container"> 
 <span id="a1" class="cartridge" ><img src="img/app2.png"/></span>
   <span  id="a2" class="cartridge"><img src="img/app2.png" /></span>
     <span  id="a3" class="cartridge"><img src="img/app2.png" /></span>
       <span  id="a4" class="cartridge" ><img src="img/app2.png" /></span>
        <span  id="a5" class="cartridge" ><img src="img/app2.png" /></span>

 <table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#F2F2F2">
<td width="50%"  align="center" class="x" >
<p><b>coulm1</b></p>
</td>
<td width="50%"  align="center" class="x">
 <p><b>coulm2</b></p>
 </td>
  </tr>
  <tr>
  <td width="50%" align="center" id="Td1"  class="y" background="img/1.png">    
  </td>
  <td width="50%"  align="center" id="Td2"  class="y" background="img/4.png">
  </td>
   </tr>
  </  table>

I need to drop those in this table :

now I use darg and drop by class here is javascript code : I use jquery ui

  $(function () {
        $(".cartridge").draggable({
            cursor: 'move',
            helper: 'clone',
            revert: 'invalid',

        });

        $(".y").droppable({
            accept: '.cartridge',
            drop: function (event, ui) {
                 $(ui.draggable).appendTo(this);
                 checkwinner();
            }
        });

    });

It works on browser but on mobile. Thanks

score 19 · Accepted Answer · answered May 12 '14 at 13:28

19

The library I recommend is https://github.com/yeco/jquery-ui-touch-punch , with this your drag and drop from Jquery UI should work on touch devises

you can use this code which I am using, it also converts mouse events into touch and it works like magic.

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

And in your document.ready just call the init() function.

answered May 12 '14 at 13:28

Suhas Gosavi

2,170
19
40

This works for sortable but now simple "click" touch events don't register. Any thoughts? – ihodonald Sep 17 '18 at 01:36
above script not work in my code. I have implemented and test it but still not work with draggable function. – Gaurang Sondagar Oct 05 '18 at 10:29
Not the best solution: if the element to drag takes the whole viewport, using jQuery UI Touch Punch prevents the document to be scrolled. Can be even a problem with element you want to be only draggable horizontally with a container hiding overflow, as a draggable carousel. In this case, the carousel prevents user to scroll the document up and down. I prefer jQuery Touch (github.com/ajlkn/jquery.touch) which makes draggable possibly touch only on mobile (mouse gesture can be filtered) and does not prevent touch events to propagate (thus, document to be scrolled). – MaxAuray Nov 14 '18 at 10:31
This worked for me when UI Touch Punch wouldn't, it honestly seems like some dark magic. – brandito Nov 11 '19 at 05:55
3

Touch punch abandoned, last update 9 years ago, website is down – zanderwar Feb 17 '21 at 00:48
1

MouseEvent.initMouseEvent() is deprecated. Not a good idea to use this code in '22 and beyond. – BILL WAGNER Jan 08 '22 at 17:26
Touch punch library works perfectly without any extra configurations. Thank you so much. – Saurabh Misra May 29 '23 at 14:29

score 1 · Answer 2 · answered Aug 29 '20 at 10:35

1

i like this open source project https://interactjs.io/ and to prevent page scrolling use in css

.draggable {
    touch-action: none
}

answered Aug 29 '20 at 10:35

Abdullah Tahan

1,963
17
28

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

Mobile browsers are not listed in the list of JQuery UI browser support. Take a look at this SO question, it might help you with the drag-and-drop implementation on mobile devices.

edited May 23 '17 at 10:29

Community

1
1

answered May 11 '14 at 16:52

Eadel

3,797
6
38
43

Yes I think the problem is that the fuction not fired thank you man for help – Moayad Myro May 11 '14 at 21:06

score 0 · Answer 4 · edited Aug 16 '22 at 20:11

When we use the event.preventDefault();, then the clickable is not working. So, just remove thoses lines and use the following code. Also, please use this code before all of the other functions. Then drag and drop will work for mobile too:

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    } [event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

jquery ui drag and drop not work on mobile

4 Answers4