How to use touch event on iPad with ui-draggable and ui-resizable?

Question

I’m using the following library:

//code.jquery.com/ui/1.11.4/jquery-ui.js

But when I put it to Mobile or iPad, it stops working, there is some way around the problem?

Javascript:

$(".container .item")
.draggable({ 
            containment: ".container",  
            cursor: 'move',
            height:'auto',
            stop: function (event, ui) {
                  if ((ui.originalPosition.top != ui.position.top) || 
                       (ui.originalPosition.left != ui.position.left)) {
                        $scope.statusDrag = true;
                  }
})
.resizable({ 
            containment: ".container",
            aspectRatio: true,
            minHeight: 15,
            minWidth: 25,
            height :'auto',
            stop: function (event, ui) {
                     if ((ui.originalSize.width != ui.size.width) || 
                         (ui.originalSize.height != ui.size.height)) {
                         $scope.statusResize = true;
                     }
                  }
});

CSS:

.item {
    width: 20px;
    height: 20px;
    background-color: blue;
}
.container {
    width: 160px;
    height: 160px;
    background-color: #ccc;
}

Answer 1

Use this script:

jquery-ui-touch-Punch

/*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

It turns ringtones into clicks. It should be loaded after jQuery. Works perfectly on Apple devices (probably other brands as well)

Soen source.