[FIX] pos_restaurant: fix table editing broken after jQuery update

The table edition feature of pos_restaurant was using an old lib
that was never updated to newer versions of jQuery by its author.

For unknown reason, this library went unnoticed when we updated our
codebase to jQuery 3.

Since this library is impossible to update per se, I decided to
remove it entirely and replace it by calls to jQuery.ui.

However, the point of this lib was to handle touch events, which
jQuery.ui does not. For this, this commit introduces a new
library which translates touch events to their click counterparts.

Tested on:
- Chrome (Windows, MacOS, Linux, Android, iOS)
- Firefox (Windows, MacOS, Linux, Android, iOS)
- Safari (MacOS, iOS)
- Edge (Windows, iOS)
- IE11 (Windows)
- Samsung Internet (Android)

closes odoo/odoo#31719

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>

5 files changed, 220 insertions, 492 deletions

diff --git a/addons/pos_restaurant/static/lib/js/jquery.event.drag-2.2.js b/addons/pos_restaurant/static/lib/js/jquery.event.drag-2.2.js
deleted file mode 100644
index 450e3044c0e..00000000000
--- a/addons/pos_restaurant/static/lib/js/jquery.event.drag-2.2.js
+++ /dev/null
@@ -1,402 +0,0 @@
-/*! 
- * jquery.event.drag - v 2.2
- * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
- * Open Source MIT License - http://threedubmedia.com/code/license
- */
-// Created: 2008-06-04 
-// Updated: 2012-05-21
-// REQUIRES: jquery 1.7.x
-
-;(function( $ ){
-
-// add the jquery instance method
-$.fn.drag = function( str, arg, opts ){
-	// figure out the event type
-	var type = typeof str == "string" ? str : "",
-	// figure out the event handler...
-	fn = $.isFunction( str ) ? str : $.isFunction( arg ) ? arg : null;
-	// fix the event type
-	if ( type.indexOf("drag") !== 0 ) 
-		type = "drag"+ type;
-	// were options passed
-	opts = ( str == fn ? arg : opts ) || {};
-	// trigger or bind event handler
-	return fn ? this.bind( type, opts, fn ) : this.trigger( type );
-};
-
-// local refs (increase compression)
-var $event = $.event, 
-$special = $event.special,
-// configure the drag special event 
-drag = $special.drag = {
-	
-	// these are the default settings
-	defaults: {
-		which: 1, // mouse button pressed to start drag sequence
-		distance: 0, // distance dragged before dragstart
-		not: ':input', // selector to suppress dragging on target elements
-		handle: null, // selector to match handle target elements
-		relative: false, // true to use "position", false to use "offset"
-		drop: true, // false to suppress drop events, true or selector to allow
-		click: false // false to suppress click events after dragend (no proxy)
-	},
-	
-	// the key name for stored drag data
-	datakey: "dragdata",
-	
-	// prevent bubbling for better performance
-	noBubble: true,
-	
-	// count bound related events
-	add: function( obj ){ 
-		// read the interaction data
-		var data = $.data( this, drag.datakey ),
-		// read any passed options 
-		opts = obj.data || {};
-		// count another realted event
-		data.related += 1;
-		// extend data options bound with this event
-		// don't iterate "opts" in case it is a node 
-		$.each( drag.defaults, function( key, def ){
-			if ( opts[ key ] !== undefined )
-				data[ key ] = opts[ key ];
-		});
-	},
-	
-	// forget unbound related events
-	remove: function(){
-		$.data( this, drag.datakey ).related -= 1;
-	},
-	
-	// configure interaction, capture settings
-	setup: function(){
-		// check for related events
-		if ( $.data( this, drag.datakey ) ) 
-			return;
-		// initialize the drag data with copied defaults
-		var data = $.extend({ related:0 }, drag.defaults );
-		// store the interaction data
-		$.data( this, drag.datakey, data );
-		// bind the mousedown event, which starts drag interactions
-		$event.add( this, "touchstart mousedown", drag.init, data );
-		// prevent image dragging in IE...
-		if ( this.attachEvent ) 
-			this.attachEvent("ondragstart", drag.dontstart ); 
-	},
-	
-	// destroy configured interaction
-	teardown: function(){
-		var data = $.data( this, drag.datakey ) || {};
-		// check for related events
-		if ( data.related ) 
-			return;
-		// remove the stored data
-		$.removeData( this, drag.datakey );
-		// remove the mousedown event
-		$event.remove( this, "touchstart mousedown", drag.init );
-		// enable text selection
-		drag.textselect( true ); 
-		// un-prevent image dragging in IE...
-		if ( this.detachEvent ) 
-			this.detachEvent("ondragstart", drag.dontstart ); 
-	},
-		
-	// initialize the interaction
-	init: function( event ){ 
-		// sorry, only one touch at a time
-		if ( drag.touched ) 
-			return;
-		// the drag/drop interaction data
-		var dd = event.data, results;
-		// check the which directive
-		if ( event.which != 0 && dd.which > 0 && event.which != dd.which ) 
-			return; 
-		// check for suppressed selector
-		if ( $( event.target ).is( dd.not ) ) 
-			return;
-		// check for handle selector
-		if ( dd.handle && !$( event.target ).closest( dd.handle, event.currentTarget ).length ) 
-			return;
-
-		drag.touched = event.type == 'touchstart' ? this : null;
-		dd.propagates = 1;
-		dd.mousedown = this;
-		dd.interactions = [ drag.interaction( this, dd ) ];
-		dd.target = event.target;
-		dd.pageX = event.pageX;
-		dd.pageY = event.pageY;
-		dd.dragging = null;
-		// handle draginit event... 
-		results = drag.hijack( event, "draginit", dd );
-		// early cancel
-		if ( !dd.propagates )
-			return;
-		// flatten the result set
-		results = drag.flatten( results );
-		// insert new interaction elements
-		if ( results && results.length ){
-			dd.interactions = [];
-			$.each( results, function(){
-				dd.interactions.push( drag.interaction( this, dd ) );
-			});
-		}
-		// remember how many interactions are propagating
-		dd.propagates = dd.interactions.length;
-		// locate and init the drop targets
-		if ( dd.drop !== false && $special.drop ) 
-			$special.drop.handler( event, dd );
-		// disable text selection
-		drag.textselect( false ); 
-		// bind additional events...
-		if ( drag.touched )
-			$event.add( drag.touched, "touchmove touchend", drag.handler, dd );
-		else 
-			$event.add( document, "mousemove mouseup", drag.handler, dd );
-		// helps prevent text selection or scrolling
-		if ( !drag.touched || dd.live )
-			return false;
-	},	
-	
-	// returns an interaction object
-	interaction: function( elem, dd ){
-		var offset = $( elem )[ dd.relative ? "position" : "offset" ]() || { top:0, left:0 };
-		return {
-			drag: elem, 
-			callback: new drag.callback(), 
-			droppable: [],
-			offset: offset
-		};
-	},
-	
-	// handle drag-releatd DOM events
-	handler: function( event ){ 
-		// read the data before hijacking anything
-		var dd = event.data;	
-		// handle various events
-		switch ( event.type ){
-			// mousemove, check distance, start dragging
-			case !dd.dragging && 'touchmove': 
-				event.preventDefault();
-			case !dd.dragging && 'mousemove':
-				//  drag tolerance, x² + y² = distance²
-				if ( Math.pow(  event.pageX-dd.pageX, 2 ) + Math.pow(  event.pageY-dd.pageY, 2 ) < Math.pow( dd.distance, 2 ) ) 
-					break; // distance tolerance not reached
-				event.target = dd.target; // force target from "mousedown" event (fix distance issue)
-				drag.hijack( event, "dragstart", dd ); // trigger "dragstart"
-				if ( dd.propagates ) // "dragstart" not rejected
-					dd.dragging = true; // activate interaction
-			// mousemove, dragging
-			case 'touchmove':
-				event.preventDefault();
-			case 'mousemove':
-				if ( dd.dragging ){
-					// trigger "drag"		
-					drag.hijack( event, "drag", dd );
-					if ( dd.propagates ){
-						// manage drop events
-						if ( dd.drop !== false && $special.drop )
-							$special.drop.handler( event, dd ); // "dropstart", "dropend"							
-						break; // "drag" not rejected, stop		
-					}
-					event.type = "mouseup"; // helps "drop" handler behave
-				}
-			// mouseup, stop dragging
-			case 'touchend': 
-			case 'mouseup': 
-			default:
-				if ( drag.touched )
-					$event.remove( drag.touched, "touchmove touchend", drag.handler ); // remove touch events
-				else 
-					$event.remove( document, "mousemove mouseup", drag.handler ); // remove page events	
-				if ( dd.dragging ){
-					if ( dd.drop !== false && $special.drop )
-						$special.drop.handler( event, dd ); // "drop"
-					drag.hijack( event, "dragend", dd ); // trigger "dragend"	
-				}
-				drag.textselect( true ); // enable text selection
-				// if suppressing click events...
-				if ( dd.click === false && dd.dragging )
-					$.data( dd.mousedown, "suppress.click", new Date().getTime() + 5 );
-				dd.dragging = drag.touched = false; // deactivate element	
-				break;
-		}
-	},
-		
-	// re-use event object for custom events
-	hijack: function( event, type, dd, x, elem ){
-		// not configured
-		if ( !dd ) 
-			return;
-		// remember the original event and type
-		var orig = { event:event.originalEvent, type:event.type },
-		// is the event drag related or drog related?
-		mode = type.indexOf("drop") ? "drag" : "drop",
-		// iteration vars
-		result, i = x || 0, ia, $elems, callback,
-		len = !isNaN( x ) ? x : dd.interactions.length;
-		// modify the event type
-		event.type = type;
-		// remove the original event
-		event.originalEvent = null;
-		// initialize the results
-		dd.results = [];
-		// handle each interacted element
-		do if ( ia = dd.interactions[ i ] ){
-			// validate the interaction
-			if ( type !== "dragend" && ia.cancelled )
-				continue;
-			// set the dragdrop properties on the event object
-			callback = drag.properties( event, dd, ia );
-			// prepare for more results
-			ia.results = [];
-			// handle each element
-			$( elem || ia[ mode ] || dd.droppable ).each(function( p, subject ){
-				// identify drag or drop targets individually
-				callback.target = subject;
-				// force propagtion of the custom event
-				event.isPropagationStopped = function(){ return false; };
-				// handle the event	
-				result = subject ? $event.dispatch.call( subject, event, callback ) : null;
-				// stop the drag interaction for this element
-				if ( result === false ){
-					if ( mode == "drag" ){
-						ia.cancelled = true;
-						dd.propagates -= 1;
-					}
-					if ( type == "drop" ){
-						ia[ mode ][p] = null;
-					}
-				}
-				// assign any dropinit elements
-				else if ( type == "dropinit" )
-					ia.droppable.push( drag.element( result ) || subject );
-				// accept a returned proxy element 
-				if ( type == "dragstart" )
-					ia.proxy = $( drag.element( result ) || ia.drag )[0];
-				// remember this result	
-				ia.results.push( result );
-				// forget the event result, for recycling
-				delete event.result;
-				// break on cancelled handler
-				if ( type !== "dropinit" )
-					return result;
-			});	
-			// flatten the results	
-			dd.results[ i ] = drag.flatten( ia.results );	
-			// accept a set of valid drop targets
-			if ( type == "dropinit" )
-				ia.droppable = drag.flatten( ia.droppable );
-			// locate drop targets
-			if ( type == "dragstart" && !ia.cancelled )
-				callback.update(); 
-		}
-		while ( ++i < len )
-		// restore the original event & type
-		event.type = orig.type;
-		event.originalEvent = orig.event;
-		// return all handler results
-		return drag.flatten( dd.results );
-	},
-		
-	// extend the callback object with drag/drop properties...
-	properties: function( event, dd, ia ){		
-		var obj = ia.callback;
-		// elements
-		obj.drag = ia.drag;
-		obj.proxy = ia.proxy || ia.drag;
-		// starting mouse position
-		obj.startX = dd.pageX;
-		obj.startY = dd.pageY;
-		// current distance dragged
-		obj.deltaX = event.pageX - dd.pageX;
-		obj.deltaY = event.pageY - dd.pageY;
-		// original element position
-		obj.originalX = ia.offset.left;
-		obj.originalY = ia.offset.top;
-		// adjusted element position
-		obj.offsetX = obj.originalX + obj.deltaX; 
-		obj.offsetY = obj.originalY + obj.deltaY;
-		// assign the drop targets information
-		obj.drop = drag.flatten( ( ia.drop || [] ).slice() );
-		obj.available = drag.flatten( ( ia.droppable || [] ).slice() );
-		return obj;	
-	},
-	
-	// determine is the argument is an element or jquery instance
-	element: function( arg ){
-		if ( arg && ( arg.jquery || arg.nodeType == 1 ) )
-			return arg;
-	},
-	
-	// flatten nested jquery objects and arrays into a single dimension array
-	flatten: function( arr ){
-		return $.map( arr, function( member ){
-			return member && member.jquery ? $.makeArray( member ) : 
-				member && member.length ? drag.flatten( member ) : member;
-		});
-	},
-	
-	// toggles text selection attributes ON (true) or OFF (false)
-	textselect: function( bool ){ 
-		$( document )[ bool ? "unbind" : "bind" ]("selectstart", drag.dontstart )
-			.css("MozUserSelect", bool ? "" : "none" );
-		// .attr("unselectable", bool ? "off" : "on" )
-		document.unselectable = bool ? "off" : "on"; 
-	},
-	
-	// suppress "selectstart" and "ondragstart" events
-	dontstart: function(){ 
-		return false; 
-	},
-	
-	// a callback instance contructor
-	callback: function(){}
-	
-};
-
-// callback methods
-drag.callback.prototype = {
-	update: function(){
-		if ( $special.drop && this.available.length )
-			$.each( this.available, function( i ){
-				$special.drop.locate( this, i );
-			});
-	}
-};
-
-// patch $.event.$dispatch to allow suppressing clicks
-var $dispatch = $event.dispatch;
-$event.dispatch = function( event ){
-	if ( $.data( this, "suppress."+ event.type ) - new Date().getTime() > 0 ){
-		$.removeData( this, "suppress."+ event.type );
-		return;
-	}
-	return $dispatch.apply( this, arguments );
-};
-
-// event fix hooks for touch events...
-var touchHooks = 
-$event.fixHooks.touchstart = 
-$event.fixHooks.touchmove = 
-$event.fixHooks.touchend =
-$event.fixHooks.touchcancel = {
-	props: "clientX clientY pageX pageY screenX screenY".split( " " ),
-	filter: function( event, orig ) {
-		if ( orig ){
-			var touched = ( orig.touches && orig.touches[0] )
-				|| ( orig.changedTouches && orig.changedTouches[0] )
-				|| null; 
-			// iOS webkit: touchstart, touchmove, touchend
-			if ( touched ) 
-				$.each( touchHooks.props, function( i, prop ){
-					event[ prop ] = touched[ prop ];
-				});
-		}
-		return event;
-	}
-};
-
-// share the same special event configuration with related events...
-$special.draginit = $special.dragstart = $special.dragend = drag;
-
-})( jQuery );
diff --git a/addons/pos_restaurant/static/lib/js/jquery.ui.touch-punch.js b/addons/pos_restaurant/static/lib/js/jquery.ui.touch-punch.js
new file mode 100644
index 00000000000..480cc124587
--- /dev/null
+++ b/addons/pos_restaurant/static/lib/js/jquery.ui.touch-punch.js
@@ -0,0 +1,188 @@
+/*!
+ * 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 ($) {
+
+    // Detect touch support
+    $.support.touch = (
+      'ontouchend' in document || // Default check
+      // Odoo fix for Chrome
+      // See: https://github.com/furf/jquery-ui-touch-punch/issues/309
+      'ontouchstart' in document ||
+      'ontouchstart' in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0
+    );
+  
+    // Ignore browsers without touch support
+    if (!$.support.touch) {
+      return;
+    }
+  
+    var mouseProto = $.ui.mouse.prototype,
+        _mouseInit = mouseProto._mouseInit,
+        _mouseDestroy = mouseProto._mouseDestroy,
+        touchHandled;
+  
+    /**
+     * Simulate a mouse event based on a corresponding touch event
+     * @param {Object} event A touch event
+     * @param {String} simulatedType The corresponding mouse event
+     */
+    function simulateMouseEvent (event, simulatedType) {
+  
+      // Ignore multi-touch events
+      if (event.originalEvent.touches.length > 1) {
+        return;
+      }
+  
+      event.preventDefault();
+  
+      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);
+    }
+  
+    /**
+     * Handle the jQuery UI widget's touchstart events
+     * @param {Object} event The widget element's touchstart event
+     */
+    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');
+    };
+  
+    /**
+     * Handle the jQuery UI widget's touchmove events
+     * @param {Object} event The document's touchmove event
+     */
+    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');
+    };
+  
+    /**
+     * Handle the jQuery UI widget's touchend events
+     * @param {Object} event The document's touchend event
+     */
+    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;
+    };
+  
+    /**
+     * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
+     * This method extends the widget with bound touch event handlers that
+     * translate touch events to mouse events and pass them to the widget's
+     * original mouse event handling methods.
+     */
+    mouseProto._mouseInit = function () {
+      
+      var self = this;
+  
+      // Delegate the touch handlers to the widget's element
+      self.element.bind({
+        touchstart: $.proxy(self, '_touchStart'),
+        touchmove: $.proxy(self, '_touchMove'),
+        touchend: $.proxy(self, '_touchEnd')
+      });
+  
+      // Call the original $.ui.mouse init method
+      _mouseInit.call(self);
+    };
+  
+    /**
+     * Remove the touch event handlers
+     */
+    mouseProto._mouseDestroy = function () {
+      
+      var self = this;
+  
+      // Delegate the touch handlers to the widget's element
+      self.element.unbind({
+        touchstart: $.proxy(self, '_touchStart'),
+        touchmove: $.proxy(self, '_touchMove'),
+        touchend: $.proxy(self, '_touchEnd')
+      });
+  
+      // Call the original $.ui.mouse destroy method
+      _mouseDestroy.call(self);
+    };
+  
+  })(jQuery);
\ No newline at end of file
diff --git a/addons/pos_restaurant/static/src/js/floors.js b/addons/pos_restaurant/static/src/js/floors.js
index da8ae75425e..ba75ef52366 100644
--- a/addons/pos_restaurant/static/src/js/floors.js
+++ b/addons/pos_restaurant/static/src/js/floors.js
@@ -60,8 +60,6 @@ var TableWidget = PosBaseWidget.extend({
         this.selected = false;
         this.moved    = false;
         this.dragpos  = {x:0, y:0};
-        this.handle_dragging = false;
-        this.handle   = null;
     },
     // computes the absolute position of a DOM mouse event, used
     // when resizing tables
@@ -94,81 +92,25 @@ var TableWidget = PosBaseWidget.extend({
         }
     },
     // drag and drop for moving the table, at drag start
-    dragstart_handler: function(event,$el,drag){
-        if (this.selected && !this.handle_dragging) {
-            this.dragging = true;
-            this.dragpos  = { x: drag.offsetX, y: drag.offsetY };
-        }
+    dragstart_handler:   function(event, ui){
+        this.dragging = true;
     },
     // drag and drop for moving the table, at drag end
-    dragend_handler:   function(){
+    dragend_handler:   function(event, ui){
         this.dragging = false;
-    },
-    // drag and drop for moving the table, at every drop movement.
-    dragmove_handler: function(event,$el,drag){
-        if (this.dragging) {
-            var dx   = drag.offsetX - this.dragpos.x;
-            var dy   = drag.offsetY - this.dragpos.y;
-
-            this.dragpos = { x: drag.offsetX, y: drag.offsetY };
-            this.moved   = true;
-
-            this.table.position_v += dy;
-            this.table.position_h += dx;
-
-            $el.css(this.table_style());
-        }
+        this.moved = true;
+        this.table.position_h = ui.position.left - this.table.width/2;
+        this.table.position_v = ui.position.top - this.table.height/2;
+        this.$el.css(this.table_style());
     },
     // drag and dropping the resizing handles
-    handle_dragstart_handler: function(event, $el, drag) {
-        if (this.selected && !this.dragging) {
-            this.handle_dragging = true;
-            this.handle_dragpos  = this.event_position(event);
-            this.handle          = drag.target;
-        }
-    },
-    handle_dragend_handler: function() {
-        this.handle_dragging = false;
-    },
-    handle_dragmove_handler: function(event) {
-        if (this.handle_dragging) {
-            var pos  = this.event_position(event);
-            var dx   = pos.x - this.handle_dragpos.x;
-            var dy   = pos.y - this.handle_dragpos.y;
-
-            this.handle_dragpos = pos;
-            this.moved   = true;
-
-            var cl     = this.handle.classList;
-
-            var MIN_SIZE = 40;  // smaller than this, and it becomes impossible to edit.
-
-            var tw = Math.max(MIN_SIZE, this.table.width);
-            var th = Math.max(MIN_SIZE, this.table.height);
-            var tx = this.table.position_h;
-            var ty = this.table.position_v;
-
-            if (cl.contains('left') && tw - dx >= MIN_SIZE) {
-                tw -= dx;
-                tx += dx;
-            } else if (cl.contains('right') && tw + dx >= MIN_SIZE) {
-                tw += dx;
-            }
-
-            if (cl.contains('top') && th - dy >= MIN_SIZE) {
-                th -= dy;
-                ty += dy;
-            } else if (cl.contains('bottom') && th + dy >= MIN_SIZE) {
-                th += dy;
-            }
-
-            this.table.width  = tw;
-            this.table.height = th;
-            this.table.position_h = tx;
-            this.table.position_v = ty;
-
-            this.$el.css(this.table_style());
-        }
+    handle_dragmove_handler: function(event, ui) {
+        this.moved = true;
+        this.table.width  = ui.size.width;
+        this.table.height = ui.size.height;
+        this.table.position_h = ui.position.left - ui.originalSize.width/2;
+        this.table.position_v = ui.position.top - ui.originalSize.height/2;
+        this.$el.css(this.table_style());
     },
     set_table_color: function(color){
         this.table.color = _.escape(color);
@@ -225,6 +167,15 @@ var TableWidget = PosBaseWidget.extend({
     select: function() {
         this.selected = true;
         this.renderElement();
+
+        this.$el.resizable({
+            handles: 'all',
+            resize: this.handle_dragmove_handler.bind(this),
+        });
+
+        this.$el.draggable({
+            stop: this.dragend_handler.bind(this),
+        });
     },
     // deselect the table (should be called via the floorplan)
     deselect: function() {
@@ -344,15 +295,6 @@ var TableWidget = PosBaseWidget.extend({
         this._super();
 
         this.update_click_handlers();
-
-        this.$el.on('dragstart', function(event,drag){ self.dragstart_handler(event,$(this),drag); });
-        this.$el.on('drag',      function(event,drag){ self.dragmove_handler(event,$(this),drag); });
-        this.$el.on('dragend',   function(event,drag){ self.dragend_handler(event,$(this),drag); });
-
-        var handles = this.$el.find('.table-handle');
-        handles.on('dragstart',  function(event,drag){ self.handle_dragstart_handler(event,$(this),drag); });
-        handles.on('drag',       function(event,drag){ self.handle_dragmove_handler(event,$(this),drag); });
-        handles.on('dragend',    function(event,drag){ self.handle_dragend_handler(event,$(this),drag); });
     },
 });
 
diff --git a/addons/pos_restaurant/static/src/xml/floors.xml b/addons/pos_restaurant/static/src/xml/floors.xml
index 76ad7e321a0..36423b93d67 100644
--- a/addons/pos_restaurant/static/src/xml/floors.xml
+++ b/addons/pos_restaurant/static/src/xml/floors.xml
@@ -62,16 +62,16 @@
                 </span>
                 <span class="table-seats"><t t-esc="widget.table.seats" /></span>
                 <t t-if="widget.table.shape === 'round'">
-                    <span class='table-handle top'></span>
-                    <span class='table-handle bottom'></span>
-                    <span class='table-handle left'></span>
-                    <span class='table-handle right'></span>
+                    <span class='table-handle top ui-resizable-n'></span>
+                    <span class='table-handle bottom ui-resizable-s'></span>
+                    <span class='table-handle left ui-resizable-w'></span>
+                    <span class='table-handle right ui-resizable-e'></span>
                 </t>
                 <t t-if="widget.table.shape === 'square'">
-                    <span class='table-handle top right'></span>
-                    <span class='table-handle top left'></span>
-                    <span class='table-handle bottom right'></span>
-                    <span class='table-handle bottom left'></span>
+                    <span class='table-handle top right ui-resizable-ne'></span>
+                    <span class='table-handle top left ui-resizable-nw'></span>
+                    <span class='table-handle bottom right ui-resizable-se'></span>
+                    <span class='table-handle bottom left ui-resizable-sw'></span>
                 </t>
             </div>
         </t>
diff --git a/addons/pos_restaurant/views/pos_restaurant_templates.xml b/addons/pos_restaurant/views/pos_restaurant_templates.xml
index ebfdd9e8664..61db4c44e24 100644
--- a/addons/pos_restaurant/views/pos_restaurant_templates.xml
+++ b/addons/pos_restaurant/views/pos_restaurant_templates.xml
@@ -3,7 +3,7 @@
 
         <template id="assets" inherit_id="point_of_sale.assets">
           <xpath expr="." position="inside">
-              <script type="text/javascript" src="/pos_restaurant/static/lib/js/jquery.event.drag-2.2.js"></script>
+              <script type="text/javascript" src="/pos_restaurant/static/lib/js/jquery.ui.touch-punch.js"></script>
               <script type="text/javascript" src="/pos_restaurant/static/src/js/multiprint.js"></script>
               <script type="text/javascript" src="/pos_restaurant/static/src/js/splitbill.js"></script>
               <script type="text/javascript" src="/pos_restaurant/static/src/js/printbill.js"></script>