From 9986e20ab91181635569cee35d4017665e09ac00 Mon Sep 17 00:00:00 2001 From: TheGr8Nik Date: Thu, 18 Sep 2014 18:16:03 +0200 Subject: [PATCH 1/2] Drag and Drop in another iframe When the drag and drop is made in another iframe, like the children iframe, the jQuery UI draggable widget add the mousemove and mouseup listener on the document element of the page. Dispatching the event to the dragging element that is in the iframe is not enought to make the event to reach the parent document, the event remain in the iframe. So I have added the dispatch of the event to the document too. --- jquery.ui.touch-punch.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jquery.ui.touch-punch.js b/jquery.ui.touch-punch.js index 16ce41d..cee7145 100755 --- a/jquery.ui.touch-punch.js +++ b/jquery.ui.touch-punch.js @@ -61,6 +61,7 @@ // Dispatch the simulated event to the target element event.target.dispatchEvent(simulatedEvent); + document .dispatchEvent(simulatedEvent); } /** @@ -177,4 +178,4 @@ _mouseDestroy.call(self); }; -})(jQuery); \ No newline at end of file +})(jQuery); From f713544fba41fad2aa11b7fae9db3312a0fc4964 Mon Sep 17 00:00:00 2001 From: TheGr8Nik Date: Fri, 19 Sep 2014 11:51:15 +0200 Subject: [PATCH 2/2] Fix the position of the touch event When dispatch the event to the parent document of the iframe it calculates the offset of the iframe and add this values to the position of the simulated mouse event. --- jquery.ui.touch-punch.js | 42 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/jquery.ui.touch-punch.js b/jquery.ui.touch-punch.js index cee7145..e305881 100755 --- a/jquery.ui.touch-punch.js +++ b/jquery.ui.touch-punch.js @@ -21,6 +21,7 @@ var mouseProto = $.ui.mouse.prototype, _mouseInit = mouseProto._mouseInit, _mouseDestroy = mouseProto._mouseDestroy, + offset_map = [], touchHandled; /** @@ -38,7 +39,10 @@ event.preventDefault(); var touch = event.originalEvent.changedTouches[0], - simulatedEvent = document.createEvent('MouseEvents'); + simulatedEvent = document.createEvent('MouseEvents'), + doc, frameOffset, + offsetX = 0, + offsetY = 0; // Initialize the simulated mouse event using the touch event's coordinates simulatedEvent.initMouseEvent( @@ -61,7 +65,41 @@ // Dispatch the simulated event to the target element event.target.dispatchEvent(simulatedEvent); - document .dispatchEvent(simulatedEvent); + + if (( doc = $( event.target )[ 0 ].ownerDocument ) !== document ) { + simulatedEvent = document.createEvent('MouseEvents'); + + frame = (doc.defaultView || doc.parentWindow).frameElement; + frameOffset = offset_map[ frame.id ]; + if ( !frameOffset ) { + frameOffset = offset_map[ frame.id ] = $( frame ).offset(); + } + + offsetX = frameOffset.left; + offsetY = frameOffset.top; + + // 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 + offsetX, // screenX + touch.screenY + offsetY, // screenY + touch.clientX + offsetX, // clientX + touch.clientY + offsetY, // clientY + false, // ctrlKey + false, // altKey + false, // shiftKey + false, // metaKey + 0, // button + null // relatedTarget + ); + + // Dispatch the simulated event to the target element + document.dispatchEvent(simulatedEvent); + } } /**