Drag and Drop (DnD) for mobile browsers
Many apps using DnD would have poor experience without it. DnD is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and changing their appearance and the application state in response to the drag and drop events.
The HTML 5 drag’n’drop API allows you to implement drag’n’drop on most desktop browsers.
Unfortunately, you’ll notice most mobile browsers don’t support it. So if you are building an app with DnD feature, that is responsive and compatible with Mobile/iPad browsers you cannot rely on this API.
What would be your best approach to solve this problem?
I was in this state, trying to solve the problem. For over a week I spent time going through API documentations, Browser compatibility charts, jQuery plugins, npm packages, Blogs, Stack overflow threads etc… You know the drill.
Finally after all the research, I ended up with the most simplest and maintainable solution, By using an alternative HTML5 API for mobile browsers. This solution turned out to be clean without using any other third party dependencies like jQuery plugins or npm packages.
Solution
Since all mobile and tablet events are triggered by touch, we will be using Touch API to solve the Drag and Drop problem.
note:
This demo solution is targeted only on mobile devices since browsers don’t have any touch interfaces. Toggle your browser device toolbar and change device to any mobile or tablet from your browser inspect.
I’ll be using only the basic features of Touch api, such as Touch.pageX and Touch.pageY to read x and y coordinates of my touch event.
Complete code available in codepen
Lets start by creating a draggable box in our HTML code.
<div id=”container”>
<div id=”box”></div>
</div>Next would be styling. Note, the position of box element should be absolute to its parent.
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
}Now comes the magic with your Vanilla JS to make the box element draggable.
window.onload = function() {
// find the element that you want to drag.
var box = document.getElementById('box');
/* listen to the touchmove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX + 'px';
box.style.top = touchLocation.pageY + 'px';
})
}Finally dropping the element.
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})Voila, now the DnD works with mobile browsers.
Solution using Vanilla JS
Solution using React
Complete working solution using DnD and Touch API.
Useful links:
Webkit Responding to Force Touch Events
