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 14 · Accepted Answer · answered May 12 '14 at 13:28

14

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,090
17
39

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
1

Touch punch abandoned, last update 9 years ago, website is down – zanderwar Feb 17 '21 at 00:48
MouseEvent.initMouseEvent() is deprecated. Not a good idea to use this code in '22 and beyond. – BILL WAGNER Jan 08 '22 at 17:26

score 0 · Answer 2 · 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,550
6
37
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 3 · answered Aug 29 '20 at 10:35

0

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,717
14
27

jquery ui drag and drop not work on mobile

3 Answers3