The jQuery UI .draggable() interaction works well with monitor screens where you navigat with a mouse. It requires some extra code for touchscreen devices such as iPads, iPhones, android phones and the like.

You need to add this code at the beginning of your .js file or place it in its own file and link to it before your custom JavaScript/jQuery file.

This source of this code was found at

(function ($) {
    // Detect touch support
    $.support.touch = 'ontouchend' in document;
    // Ignore browsers without touch support
    if (!$.support.touch) {
    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) {
    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
        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;
    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])) {
    // 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) {
    // 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) {
    // 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
        .on('touchstart', $.proxy(self, '_touchStart'))
        .on('touchmove', $.proxy(self, '_touchMove'))
        .on('touchend', $.proxy(self, '_touchEnd'));

        // Call the original $.ui.mouse init method;