[javascript] Javascript Drag and drop for touch devices

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.


This question is related to javascript jquery jquery-ui touch

The answer is

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");
        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);


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

Similar questions with javascript tag:

Similar questions with jquery tag:

Similar questions with jquery-ui tag:

Similar questions with touch tag: