From b9132412a3d6ed5dca164510b797ab1585017671 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 20 Oct 2021 22:55:50 -0400 Subject: [PATCH 1/8] feat: show shadow element of row being moved - add option to create a simple clone of the row being moved and show it as a shadow of the row being moved so that we know exactly which row is being dragged --- ...example-row-detail-selection-and-move.html | 3 ++ plugins/slick.rowmovemanager.js | 32 +++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/examples/example-row-detail-selection-and-move.html b/examples/example-row-detail-selection-and-move.html index 7988cdbc..2513ee21 100644 --- a/examples/example-row-detail-selection-and-move.html +++ b/examples/example-row-detail-selection-and-move.html @@ -264,6 +264,9 @@

Selected Titles:

cancelEditOnDrag: true, singleRowMove: true, disableRowSelection: true, + hideRowMoveShadow: false, // defaults to true + rowMoveShadowScale: 0.7, // defaults to 0.75 + rowMoveShadowOpacity: 0.95, // defaults to 0.95 // make only every 2nd row an a moveable row, // you can override it here in the options or externally by calling the method on the plugin instance diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 9b8b6370..9df96f94 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -4,6 +4,9 @@ * columnId: Column definition id (defaults to "_move") * cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) * disableRowSelection: Do we want to disable the row selection? (defaults to false) + * hideRowMoveShadow: Do we want to hide the row move shadow clone? (defaults to true) + * rowMoveShadowOpacity: When row move shadow is shown, what is its opacity? (defaults to 1) + * rowMoveShadowScale: When row move shadow is shown, what is its size scale? (default to 0.75) * singleRowMove: Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false) * width: Width of the column * usabilityOverride: Callback method that user can override the default behavior of the row being moveable or not @@ -29,6 +32,9 @@ cssClass: null, cancelEditOnDrag: false, disableRowSelection: false, + hideRowMoveShadow: true, + rowMoveShadowOpacity: 1, + rowMoveShadowScale: 0.75, singleRowMove: false, width: 40, }; @@ -82,6 +88,29 @@ _dragging = true; e.stopImmediatePropagation(); + // optionally create a shadow element of the row so that we can see all the time which row exactly we're dragging + if (!options.hideRowMoveShadow) { + var $slickRowElm = $(_grid.getCellNode(cell.row, cell.cell)).closest('.slick-row'); + if ($slickRowElm) { + dd.clonedSlickRow = $slickRowElm.clone(); + dd.clonedSlickRow.css("position", "absolute") + .css("zIndex", "999999") + .css("marginLeft", "-5%") + .css("opacity", options.rowMoveShadowOpacity || 0.95) + .css("transform", "scale(" + options.rowMoveShadowScale + ")") + .css("boxShadow", "rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px") + .appendTo(_canvas); + + // add a listener on the canvas whenever the mouse moves, we'll have our shadow row follow the mouse cursor + _canvas.addEventListener('mousemove', function (e) { + if (dd.clonedSlickRow) { + var offsetY = e.clientY - (e.currentTarget).getBoundingClientRect().top; + dd.clonedSlickRow.css("top", offsetY - 6); + } + }); + } + } + var selectedRows = options.singleRowMove ? [cell.row] : _grid.getSelectedRows(); if (selectedRows.length === 0 || $.inArray(cell.row, selectedRows) == -1) { @@ -163,6 +192,9 @@ dd.guide.remove(); dd.selectionProxy.remove(); + if (dd.clonedSlickRow) { + dd.clonedSlickRow.remove(); + } if (dd.canMove) { var eventData = { From 402158b7ef0a845a2b0f32a926146ac0f91a6ed5 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 20 Oct 2021 23:15:05 -0400 Subject: [PATCH 2/8] feat: add row move shadow margin-left option --- plugins/slick.rowmovemanager.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 9df96f94..6b961b7d 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -33,6 +33,7 @@ cancelEditOnDrag: false, disableRowSelection: false, hideRowMoveShadow: true, + rowMoveMarginLeft: "-5%", rowMoveShadowOpacity: 1, rowMoveShadowScale: 0.75, singleRowMove: false, @@ -95,7 +96,7 @@ dd.clonedSlickRow = $slickRowElm.clone(); dd.clonedSlickRow.css("position", "absolute") .css("zIndex", "999999") - .css("marginLeft", "-5%") + .css("marginLeft", options.rowMoveMarginLeft || "-5%") .css("opacity", options.rowMoveShadowOpacity || 0.95) .css("transform", "scale(" + options.rowMoveShadowScale + ")") .css("boxShadow", "rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px") From a1bb1f889f60eb27d5ea854d3752ec7c42da983f Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 20 Oct 2021 23:17:02 -0400 Subject: [PATCH 3/8] feat: add row move shadow margin-left docs --- plugins/slick.rowmovemanager.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 6b961b7d..c7e0ac9b 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -5,6 +5,7 @@ * cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) * disableRowSelection: Do we want to disable the row selection? (defaults to false) * hideRowMoveShadow: Do we want to hide the row move shadow clone? (defaults to true) + * rowMoveShadowMarginLeft: When row move shadow is shown, optional margin-left (defaults to -5%) * rowMoveShadowOpacity: When row move shadow is shown, what is its opacity? (defaults to 1) * rowMoveShadowScale: When row move shadow is shown, what is its size scale? (default to 0.75) * singleRowMove: Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false) @@ -33,7 +34,7 @@ cancelEditOnDrag: false, disableRowSelection: false, hideRowMoveShadow: true, - rowMoveMarginLeft: "-5%", + rowMoveShadowMarginLeft: "-5%", rowMoveShadowOpacity: 1, rowMoveShadowScale: 0.75, singleRowMove: false, @@ -96,7 +97,7 @@ dd.clonedSlickRow = $slickRowElm.clone(); dd.clonedSlickRow.css("position", "absolute") .css("zIndex", "999999") - .css("marginLeft", options.rowMoveMarginLeft || "-5%") + .css("marginLeft", options.rowMoveShadowMarginLeft || "-5%") .css("opacity", options.rowMoveShadowOpacity || 0.95) .css("transform", "scale(" + options.rowMoveShadowScale + ")") .css("boxShadow", "rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px") From 40c8da7f45307cc04b2aedc86610a4ac67b450fa Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 21 Oct 2021 00:11:40 -0400 Subject: [PATCH 4/8] feat: add more options to row move shadow element --- ...example-row-detail-selection-and-move.html | 2 +- plugins/slick.rowmovemanager.js | 35 ++++++++++--------- slick.grid.css | 6 ++++ 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/examples/example-row-detail-selection-and-move.html b/examples/example-row-detail-selection-and-move.html index 2513ee21..318192fe 100644 --- a/examples/example-row-detail-selection-and-move.html +++ b/examples/example-row-detail-selection-and-move.html @@ -266,7 +266,7 @@

Selected Titles:

disableRowSelection: true, hideRowMoveShadow: false, // defaults to true rowMoveShadowScale: 0.7, // defaults to 0.75 - rowMoveShadowOpacity: 0.95, // defaults to 0.95 + rowMoveShadowOpacity: 0.9, // defaults to 0.95 // make only every 2nd row an a moveable row, // you can override it here in the options or externally by calling the method on the plugin instance diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index c7e0ac9b..1357f4ed 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -1,16 +1,17 @@ /** * Row Move Manager options: - * cssClass: A CSS class to be added to the menu item container. - * columnId: Column definition id (defaults to "_move") - * cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) - * disableRowSelection: Do we want to disable the row selection? (defaults to false) - * hideRowMoveShadow: Do we want to hide the row move shadow clone? (defaults to true) - * rowMoveShadowMarginLeft: When row move shadow is shown, optional margin-left (defaults to -5%) - * rowMoveShadowOpacity: When row move shadow is shown, what is its opacity? (defaults to 1) - * rowMoveShadowScale: When row move shadow is shown, what is its size scale? (default to 0.75) - * singleRowMove: Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false) - * width: Width of the column - * usabilityOverride: Callback method that user can override the default behavior of the row being moveable or not + * cssClass: A CSS class to be added to the menu item container. + * columnId: Column definition id (defaults to "_move") + * cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) + * disableRowSelection: Do we want to disable the row selection? (defaults to false) + * hideRowMoveShadow: Do we want to hide the row move shadow clone? (defaults to true) + * rowMoveShadowMarginTop: When row move shadow is shown, optional margin-top (defaults to 0) + * rowMoveShadowMarginLeft: When row move shadow is shown, optional margin-left (defaults to 0) + * rowMoveShadowOpacity: When row move shadow is shown, what is its opacity? (defaults to 0.95) + * rowMoveShadowScale: When row move shadow is shown, what is its size scale? (default to 0.75) + * singleRowMove: Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false) + * width: Width of the column + * usabilityOverride: Callback method that user can override the default behavior of the row being moveable or not * */ (function ($) { @@ -34,8 +35,9 @@ cancelEditOnDrag: false, disableRowSelection: false, hideRowMoveShadow: true, - rowMoveShadowMarginLeft: "-5%", - rowMoveShadowOpacity: 1, + rowMoveShadowMarginTop: 0, + rowMoveShadowMarginLeft: 0, + rowMoveShadowOpacity: 0.95, rowMoveShadowScale: 0.75, singleRowMove: false, width: 40, @@ -95,12 +97,11 @@ var $slickRowElm = $(_grid.getCellNode(cell.row, cell.cell)).closest('.slick-row'); if ($slickRowElm) { dd.clonedSlickRow = $slickRowElm.clone(); - dd.clonedSlickRow.css("position", "absolute") - .css("zIndex", "999999") - .css("marginLeft", options.rowMoveShadowMarginLeft || "-5%") + dd.clonedSlickRow.addClass('slick-reorder-shadow-row') + .css("marginTop", options.rowMoveShadowMarginTop || 0) + .css("marginLeft", options.rowMoveShadowMarginLeft || 0) .css("opacity", options.rowMoveShadowOpacity || 0.95) .css("transform", "scale(" + options.rowMoveShadowScale + ")") - .css("boxShadow", "rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px") .appendTo(_canvas); // add a listener on the canvas whenever the mouse moves, we'll have our shadow row follow the mouse cursor diff --git a/slick.grid.css b/slick.grid.css index 869a91e3..774159c4 100644 --- a/slick.grid.css +++ b/slick.grid.css @@ -195,6 +195,12 @@ classes should alter those! filter: alpha(opacity = 70); } +.slick-reorder-shadow-row { + position: absolute; + z-index: 999999; + box-shadow: rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px; +} + .slick-selection { z-index: 10; position: absolute; From 6108c1675729c7bddd8752aeaa77a0eaf1f5d6fa Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 21 Oct 2021 11:17:59 -0400 Subject: [PATCH 5/8] fix: nullify the shadow element to avoid leak --- plugins/slick.rowmovemanager.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 1357f4ed..6d8d2b84 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -197,6 +197,7 @@ dd.selectionProxy.remove(); if (dd.clonedSlickRow) { dd.clonedSlickRow.remove(); + dd.clonedSlickRow = null; } if (dd.canMove) { @@ -260,4 +261,4 @@ "pluginName": "RowMoveManager" }); } -})(jQuery); \ No newline at end of file +})(jQuery); From f1fc9a3c4854b760c39b4928f9ca7a82e70c69cf Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 21 Oct 2021 11:46:27 -0400 Subject: [PATCH 6/8] fix: row move shadow element should work regardless of scroll position --- plugins/slick.rowmovemanager.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 6d8d2b84..5fa27d8f 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -105,9 +105,9 @@ .appendTo(_canvas); // add a listener on the canvas whenever the mouse moves, we'll have our shadow row follow the mouse cursor - _canvas.addEventListener('mousemove', function (e) { + $("body").on('mousemove', function (e) { if (dd.clonedSlickRow) { - var offsetY = e.clientY - (e.currentTarget).getBoundingClientRect().top; + var offsetY = e.pageY - $(_canvas).offset().top; dd.clonedSlickRow.css("top", offsetY - 6); } }); From 2910dcd63b4af2cfcade61c4ea44d8efbe0775eb Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 21 Oct 2021 11:50:29 -0400 Subject: [PATCH 7/8] fix: add missing mouseevent unsubscribe on row move destroy --- plugins/slick.rowmovemanager.js | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 5fa27d8f..115b85fa 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -61,6 +61,7 @@ function destroy() { _handler.unsubscribeAll(); + $("body").off('mousemove'); } function setOptions(newOptions) { From de978246c186a9c66a782e2dec119d266ad89c78 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 21 Oct 2021 16:58:43 -0400 Subject: [PATCH 8/8] fix: remove the jumping effect on first Row Move - when starting the row drag at first it always starts at 0px and then jumps at the position the user started the drag so it looks like it jumps from 0px to let 50px if you move 2nd row and it's a bit annoying (it's like a flicker for half a second). We can simply create the proxy/guide/shadow as hidden and only show it after we move so we won't see the first flicker. --- plugins/slick.rowmovemanager.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/plugins/slick.rowmovemanager.js b/plugins/slick.rowmovemanager.js index 115b85fa..0fe8dfb1 100644 --- a/plugins/slick.rowmovemanager.js +++ b/plugins/slick.rowmovemanager.js @@ -61,7 +61,6 @@ function destroy() { _handler.unsubscribeAll(); - $("body").off('mousemove'); } function setOptions(newOptions) { @@ -103,15 +102,8 @@ .css("marginLeft", options.rowMoveShadowMarginLeft || 0) .css("opacity", options.rowMoveShadowOpacity || 0.95) .css("transform", "scale(" + options.rowMoveShadowScale + ")") + .hide() .appendTo(_canvas); - - // add a listener on the canvas whenever the mouse moves, we'll have our shadow row follow the mouse cursor - $("body").on('mousemove', function (e) { - if (dd.clonedSlickRow) { - var offsetY = e.pageY - $(_canvas).offset().top; - dd.clonedSlickRow.css("top", offsetY - 6); - } - }); } } @@ -133,6 +125,7 @@ .css("zIndex", "99999") .css("width", $(_canvas).innerWidth()) .css("height", rowHeight * selectedRows.length) + .hide() .appendTo(_canvas); dd.guide = $("
") @@ -153,7 +146,13 @@ e.stopImmediatePropagation(); var top = e.pageY - $(_canvas).offset().top; - dd.selectionProxy.css("top", top - 5); + dd.selectionProxy.css("top", top - 5).show(); + + // if the row move shadow is enabled, we'll also make it follow the mouse cursor + if (dd.clonedSlickRow) { + var offsetY = e.pageY - $(_canvas).offset().top; + dd.clonedSlickRow.css("top", offsetY - 6).show(); + } var insertBefore = Math.max(0, Math.min(Math.round(top / _grid.getOptions().rowHeight), _grid.getDataLength())); if (insertBefore !== dd.insertBefore) {