Question

36

Javascript Drag and drop for touch devices

rated 0 times [ 38] [ 2] / answers: 1 / hits: 142647 / 13 Years ago, thu, march 3, 2011, 12:00:00

I am looking for a drag & DROP plugin that works on touch devices.

I would like similar functionality to the jQuery UI plugin which allows droppable elements.

The jqtouch plugin supports dragging, but no dropping.

Here is drag & drop that only supports iPhone/iPad.

Can anyone point me in the direction of a drag & drop plugin that works on android/ios?

...Or it might be possible to update the jqtouch plugin for droppability, it already runs on Andriod and IOS.

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alysas

Add To Favorites

Follow

Total Points: 616

Total Questions: 111

Total Answers: 124

Location: Slovenia

Member since Wed, Apr 6, 2022

2 Years ago

answered 13 Years ago miles · Accepted Answer

You can use the Jquery UI for drag and drop with an additional library that translates mouse events into touch which is what you need, the library I recommend is https://github.com/furf/jquery-ui-touch-punch, with this your drag and drop from Jquery UI should work on touch devises

or 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

code found from Here