Enabling Drag and Drop feature in Touch Devices (Mobile View)

Drag and Drop feature in Mobile Devices

Usually some of JQuery UI doesn’t support touch devices. Drag and drop is one of popular feature we have been implementing using Jquery UI. But the problem is Jquery UI Drag and Drop feature is not supported in touch devices.

To overcome this issue we have to add touch support jquery script in our code. Please find below for the required script for enabling drag and drop feature in touch devices.

Script:


// scripts for enabling drag and drop feature in mobile view
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
return;
}
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
touchHandled;
function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault(); //use this to prevent scrolling during ui use
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType, // type
true, // bubbles 
true, // cancelable 
window, // view 
1, // detail 
touch.screenX, // screenX 
touch.screenY, // screenY 
touch.clientX, // clientX 
touch.clientY, // clientY 
false, // ctrlKey 
false, // altKey 
false, // shiftKey 
false, // metaKey 
0, // button 
null // relatedTarget 
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
};
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');
// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, 'click');
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
self.element
.on('touchstart', $.proxy(self, '_touchStart'))
.on('touchmove', $.proxy(self, '_touchMove'))
.on('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *