HTML5 Drag & Drop for Mobile

Question

This is my implementation of WHATWG HTML5 Drag and Drop:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.innerHTML+=" <p>"+document.getElementById(data).innerHTML+"</p>";
}

.div {
    width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;
}

<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
    <button id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
    <button id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
</div>

It works fine in Google Chrome, but not in iOS or Android. I have read other topics about this but most of them suggest using jQuery or a JavaScript plugin.

Is it possible to make the HTML drag and drop implementation work on iOS and Android (mobile devices)?

Monia

try looking at this touchpunch.furf.com – Bebebebeerine

Answer 1

Unfortunately Drag and Drop is not currently supported by any mobile browsers except Internet Explorer Mobile 10 onwards and a single deprecated Presto version of Opera (which has now been replaced by Webkit based versions). See http://caniuse.com/#feat=dragndrop

The best solution would be to detect support for drag and drop (ensuring that this does not give you false positives in mobile versions of browsers that do support the API) and then use JavaScript to polyfill on mobile devices. This will also help provide support in legacy browser versions that pre-date native support for drag and drop.

You can use the excellent YepNope conditional loading library to run the test and then conditionally load one or more scripts to provide JavaScript support for drag and drop, or you could use Modernizr to both carry out the test and load the scripts.

Effulgent

If I were to use a javascript library to handle touch (such as jQuery UI) what do you recommend? – Monia

That depends very much on the application and what else you are trying to achieve - but if you are already using jQuery in the application already then you could do a lot worse then a custom build of jQuery UI which only includes the drag and drop components. Are you trying to implement drag and drop file uploads, move components around the page? See html5please.com/#polyfill for a list of polyfills or search for "drag and drop polyfill". – Effulgent

I am actually trying to build an HTML5 drag and drop WYSIWIG webpage builder like webs.com or wix.com - any suggestions? – Monia

argh! is there any nice feature that browser developers have the decency to implement simultaneously between mobile and desktop versions? – Kinesics

Answer 2

I had the same need and wrote a polyfill that enables HTML5 drag/drop on mobile devices (Android and IOS):

https://github.com/Bernardo-Castilho/dragdroptouch

Hope this works for you.

Wadai

Works great! Unless you're working in the Shadow DOM. – Cato

Thanks a lot @bernardo , your polyfill was a life saver & saved me from changing my code to support touch events. Awesome work. – Chisolm

This is the best answer. Just dropped it in and everything started working perfectly! – Scabbard

four and a half years later, and it works like a charm – Cyclothymia

I have tried your solution and so far it is working. However, there is an issue when I need drag the image within the drop zone to change the position while running on the mobile phone and it is not working. How can I do that kind of thing in my web application? Please help me. – Nierman

It's licenced. Not open source. – Dragster

Answer 3

Since most of mobile browser still do not support HTML5 drag drop, so just in case some still looking solution, I have created a simple drag and drop that works in most of the mobile browser using Raphael. http://xtrace.blogspot.de/2013/01/simple-drag-and-drop-with-raphael.html

Raster