From ee7f59ef75cdf66441bc89ff6d613c0bc547cda4 Mon Sep 17 00:00:00 2001 From: Alex Yumas <2749700+jitbit@users.noreply.github.com> Date: Tue, 26 Sep 2017 22:00:29 +0300 Subject: [PATCH 1/3] animated dragging - dragged element actually follows the mouse --- js/jquery.tablednd.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/js/jquery.tablednd.js b/js/jquery.tablednd.js index 4e49426..611f175 100644 --- a/js/jquery.tablednd.js +++ b/js/jquery.tablednd.js @@ -131,6 +131,8 @@ jQuery.tableDnD = { dragObject: null, /** The current mouse offset */ mouseOffset: null, + /** mouse position where started dragging */ + oldMousePosition: null, /** Remember the old value of X and Y so that we don't do too much processing */ oldX: 0, oldY: 0, @@ -262,6 +264,7 @@ jQuery.tableDnD = { this.currentTable = table; this.mouseOffset = this.getMouseOffset(target, e); this.originalOrder = this.currentOrder(); + this.oldMousePosition = this.mouseCoords(e); // Now we need to capture the mouse up and mouse move event // We can use bind so that we don't interfere with other event handlers @@ -436,12 +439,8 @@ jQuery.tableDnD = { // auto scroll the window $.tableDnD.autoScroll(mousePos); - - currentRow = $.tableDnD.findDropTargetRow(dragObj, y); - moving = $.tableDnD.findDragDirection(x, y); - - $.tableDnD.moveVerticle(moving, currentRow); - $.tableDnD.moveHorizontal(moving, currentRow); + + dragObj.css("transform", "translate(" + (mousePos.x - $.tableDnD.oldMousePosition.x) + "px, " + (mousePos.y - $.tableDnD.oldMousePosition.y) + "px)"); return false; }, @@ -497,7 +496,7 @@ jQuery.tableDnD = { } return null; }, - processMouseup: function() { + processMouseup: function(e) { if (!this.currentTable || !this.dragObject) return null; @@ -505,6 +504,15 @@ jQuery.tableDnD = { droppedRow = this.dragObject, parentLevel = 0, myLevel = 0; + + //actually move the element + var mousePos = $.tableDnD.mouseCoords(e); + var x = mousePos.x - $.tableDnD.mouseOffset.x; + var y = mousePos.y - $.tableDnD.mouseOffset.y; + var currentRow = $.tableDnD.findDropTargetRow($(droppedRow), y); + var moving = $.tableDnD.findDragDirection(x, y); + $.tableDnD.moveVerticle(moving, currentRow); + $.tableDnD.moveHorizontal(moving, currentRow); // Unbind the event handlers $(document) @@ -547,12 +555,14 @@ jQuery.tableDnD = { // Call the onDragStop method if there is one config.onDragStop && config.onDragStop(this.currentTable, droppedRow); + + $(droppedRow).css("transform", "none"); this.currentTable = null; // let go of the table too }, mouseup: function(e) { e && e.preventDefault(); - $.tableDnD.processMouseup(); + $.tableDnD.processMouseup(e); return false; }, jsonize: function(pretify) { From 991bad21500d4169c91947d38c788403bd47f9bf Mon Sep 17 00:00:00 2001 From: Alex Yumas <2749700+jitbit@users.noreply.github.com> Date: Tue, 26 Sep 2017 22:32:27 +0300 Subject: [PATCH 2/3] fixed bug with first drag in UP-direction --- js/jquery.tablednd.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/jquery.tablednd.js b/js/jquery.tablednd.js index 611f175..a60765d 100644 --- a/js/jquery.tablednd.js +++ b/js/jquery.tablednd.js @@ -265,6 +265,12 @@ jQuery.tableDnD = { this.mouseOffset = this.getMouseOffset(target, e); this.originalOrder = this.currentOrder(); this.oldMousePosition = this.mouseCoords(e); + + //call "findDragDirection" to reset oldX and oldY vars + var mousePos = $.tableDnD.mouseCoords(e); + var x = mousePos.x - $.tableDnD.mouseOffset.x; + var y = mousePos.y - $.tableDnD.mouseOffset.y; + var moving = $.tableDnD.findDragDirection(x, y); // Now we need to capture the mouse up and mouse move event // We can use bind so that we don't interfere with other event handlers From 31f601fd55718dde7dabfcdd14d75ba336df0ecb Mon Sep 17 00:00:00 2001 From: Alex Yumas <2749700+jitbit@users.noreply.github.com> Date: Wed, 27 Sep 2017 22:40:41 +0300 Subject: [PATCH 3/3] MSIE/Edge workaround see https://stackoverflow.com/questions/34718443/ie-edge-not-applying-transform-translate-to-table-row --- js/jquery.tablednd.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/js/jquery.tablednd.js b/js/jquery.tablednd.js index a60765d..c4bbd07 100644 --- a/js/jquery.tablednd.js +++ b/js/jquery.tablednd.js @@ -272,6 +272,10 @@ jQuery.tableDnD = { var y = mousePos.y - $.tableDnD.mouseOffset.y; var moving = $.tableDnD.findDragDirection(x, y); + //ie/edge workaround (it has a bug, transform not allowed for TR elements, but allowed for TD, still not fixed, see StackOverflow) + if (this.isIeOrEdge()) + $(dragObject).css("display", "block"); + // Now we need to capture the mouse up and mouse move event // We can use bind so that we don't interfere with other event handlers $(document) @@ -282,6 +286,10 @@ jQuery.tableDnD = { config.onDragStart && config.onDragStart(table, target); }, + isIeOrEdge: function () { + var ua = window.navigator.userAgent; + return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1 || ua.indexOf('Edge/') > -1; + }, updateTables: function() { this.each(function() { // this is now bound to each matching table @@ -562,7 +570,11 @@ jQuery.tableDnD = { config.onDragStop && config.onDragStop(this.currentTable, droppedRow); - $(droppedRow).css("transform", "none"); + $(droppedRow).css("transform", "none"); + + //ie/edge workaround + if (this.isIeOrEdge()) + $(droppedRow).css("display", ""); this.currentTable = null; // let go of the table too },