mouse event rewritte of draggable=true

* part 1 of #1757
* converted previous HTML5 `draggable=true` based code to simple mouse move/enter/leave events for dragging (like sizing) in preparation of mobile support.
* modified example to help debug issues
* tested to be on par with prev code on Chrome, minus custom cursors.

Author: adumesny

demo/nested.html

@@ -69,8 +69,8 @@ <h1>Nested grids demo</h1>
       id: 'main',
       children: [
         {x:0, y:0, content: 'regular item'},
-        {x:1, w:4, h:4, subGrid: {children: sub1, class: 'sub1', ...subOptions}},
-        {x:5, w:3, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
+        {x:1, w:4, h:4, subGrid: {children: sub1, id:'sub1_grid', class: 'sub1', ...subOptions}},
+        {x:5, w:3, h:4, subGrid: {children: sub2, id:'sub2_grid', class: 'sub2', ...subOptions}},
       ]
     };
 

demo/static.html

@@ -54,8 +54,7 @@ <h1>Static vs can move/drag Demo</h1>
 
     GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' });
 
-    // TEST enable after disabled
-    // grid.setStatic(false);
+    // grid.setStatic(false); // TEST enable after disabled
 
   </script>
 </body>

demo/two-jq.html

@@ -11,37 +11,6 @@
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
   <script src="../dist/gridstack-jq.js"></script>
-
-  <style type="text/css">
-    .grid-stack-item-removing {
-      opacity: 0.5;
-    }
-    .trash {
-      height: 150px;
-      margin-bottom: 20px;
-      background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
-    }
-    .sidebar {
-      background: rgba(0, 255, 0, 0.1);
-      height: 150px;
-      padding: 25px 0;
-      text-align: center;
-    }
-    .sidebar .grid-stack-item {
-      width: 120px;
-      height: 50px;
-      border: 2px dashed green;
-      text-align: center;
-      line-height: 35px;
-      z-index: 10;
-      background: rgba(0, 255, 0, 0.1);
-      cursor: default;
-      display: inline-block;
-    }
-    .sidebar .grid-stack-item .grid-stack-item-content {
-      background: none;
-    }
-  </style>
 </head>
 <body>
   <div class="container-fluid">
@@ -66,16 +35,16 @@ <h1>Two grids demo (Jquery version)</h1>
       </div>
     </div>
 
-    <div class="row">
+    <div class="row" style="margin-top: 20px">
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6"></div>
+        <div class="grid-stack"></div>
       </div>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: true</a>
         <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6"></div>
+        <div class="grid-stack"></div>
       </div>
     </div>
   </div>
@@ -91,10 +60,10 @@ <h1>Two grids demo (Jquery version)</h1>
       float: false,
       // dragIn: '.sidebar .grid-stack-item', // add draggable to class
       // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
-      removable: '.trash', // drag-out delete class
-      acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
+      removable: '.trash', // true or drag-out delete class
+      acceptWidgets: function(el) { return true; } // function example, but can also be: true | false | '.someClass' value
     };
-    grids = GridStack.initAll(options);
+    let grids = GridStack.initAll(options);
     grids[1].float(true);
 
     // new 4.x static method instead of setting up options on every grid (never been per grid really) but old options still works
@@ -115,19 +84,19 @@ <h1>Two grids demo (Jquery version)</h1>
     });
   });
 
-  // decide what the dropped item will be - for now just a clone but can be anything
-  function myClone(event) {
-    return event.target.cloneNode(true);
-  }
+    // decide what the dropped item will be - for now just a clone but can be anything
+    function myClone(event) {
+      return event.target.cloneNode(true);
+    }
 
-  function toggleFloat(button, i) {
-    grids[i].float(! grids[i].getFloat());
-    button.innerHTML = 'float: ' + grids[i].getFloat();
-  }
+    function toggleFloat(button, i) {
+      grids[i].float(! grids[i].getFloat());
+      button.innerHTML = 'float: ' + grids[i].getFloat();
+    }
 
-  function compact(i) {
-    grids[i].compact();
-  }
+    function compact(i) {
+      grids[i].compact();
+    }
   </script>
 </body>
 </html>

demo/two.html

@@ -30,7 +30,7 @@ <h1>Two grids demo</h1>
         </div>
       </div>
       <div class="col-md-9">
-        <div class="trash">
+        <div class="trash" id="trash">
         </div>
       </div>
     </div>
@@ -39,12 +39,12 @@ <h1>Two grids demo</h1>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack"></div>
+        <div class="grid-stack" id="left_grid"></div>
       </div>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: true</a>
         <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack"></div>
+        <div class="grid-stack" id="right_grid"></div>
       </div>
     </div>
   </div>

doc/CHANGES.md

@@ -70,6 +70,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## TBD
+* converted previous HTML5 `draggable=true` based code to simple mouse move/enter/leave events for dragging in preparation of mobile support.
 * changed `commit()` to be `batchUpdate(false)` to make it easier to turn batch on/off. updated doc. old API remains for now
 
 ## 5.1.1 (2022-06-16)

src/gridstack-dd.ts

@@ -24,7 +24,7 @@ export type DDValue = number | string;
 /** drag&drop events callbacks */
 export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
 
-// TEST let count = 0;
+// let count = 0; // TEST
 
 /**
  * Base class implementing common Grid drag'n'drop functionality, with domain specific subclass (h5 vs jq subclasses)
@@ -153,7 +153,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
      * entering our grid area
      */
     .on(this.el, 'dropover', (event: Event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
-      // TEST console.log(`over ${this.el.gridstack.opts.id} ${count++}`);
+      // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
       let node = el.gridstackNode;
       // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
       if (node?.grid === this && !node._temporaryRemoved) {
@@ -163,7 +163,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
 
       // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
       if (node?.grid && node.grid !== this && !node._temporaryRemoved) {
-        // TEST console.log('dropover without leave');
+        // console.log('dropover without leave'); // TEST
         let otherGrid = node.grid;
         otherGrid._leave(el, helper);
       }
@@ -189,7 +189,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
       // if the item came from another grid, make a copy and save the original info in case we go back there
       if (node.grid && node.grid !== this) {
         // copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific
-        // TEST console.log('dropover cloning node');
+        // console.log('dropover cloning node'); // TEST
         if (!el._gridstackNodeOrig) el._gridstackNodeOrig = node; // shouldn't have multiple nested!
         el.gridstackNode = node = {...node, w, h, grid: this};
         this.engine.cleanupNode(node)
@@ -215,7 +215,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
      * Leaving our grid area...
      */
     .on(this.el, 'dropout', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
-      // TEST console.log(`out ${this.el.gridstack.opts.id} ${count++}`);
+      // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
       let node = el.gridstackNode;
       if (!node) return false;
       // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
@@ -237,7 +237,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
       this.placeholder.remove();
 
       // notify previous grid of removal
-      // TEST console.log('drop delete _gridstackNodeOrig')
+      // console.log('drop delete _gridstackNodeOrig') // TEST
       let origNode = el._gridstackNodeOrig;
       delete el._gridstackNodeOrig;
       if (wasAdded && origNode && origNode.grid && origNode.grid !== this) {
@@ -474,7 +474,7 @@ GridStack.prototype._onStartMoving = function(this: GridStack, el: GridItemHTMLE
   // @ts-ignore
   this._writePosAttr(this.placeholder, node)
   this.el.appendChild(this.placeholder);
-  // TEST console.log('_onStartMoving placeholder')
+  // console.log('_onStartMoving placeholder') // TEST
 
   node.el = this.placeholder;
   node._lastUiPosition = ui.position;
@@ -483,7 +483,7 @@ GridStack.prototype._onStartMoving = function(this: GridStack, el: GridItemHTMLE
   delete node._lastTried;
 
   if (event.type === 'dropover' && node._temporaryRemoved) {
-    // TEST console.log('engine.addNode x=' + node.x);
+    // console.log('engine.addNode x=' + node.x); // TEST
     this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
     node._moving = true; // AFTER, mark as moving object (wanted fix location before)
   }
@@ -523,7 +523,7 @@ GridStack.prototype._leave = function(this: GridStack, el: GridItemHTMLElement,
 
   // finally if item originally came from another grid, but left us, restore things back to prev info
   if (el._gridstackNodeOrig) {
-    // TEST console.log('leave delete _gridstackNodeOrig')
+    // console.log('leave delete _gridstackNodeOrig') // TEST
     el.gridstackNode = el._gridstackNodeOrig;
     delete el._gridstackNodeOrig;
   } else if (node._isExternal) {

src/gridstack.scss

@@ -61,16 +61,6 @@ $animation_speed: .3s !default;
     &.ui-resizable-disabled > .ui-resizable-handle,
     &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
 
-    &.ui-draggable-dragging,
-    &.ui-resizable-resizing {
-      z-index: 100;
-
-      > .grid-stack-item-content {
-        box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-        opacity: 0.8;
-      }
-    }
-
     > .ui-resizable-se,
     > .ui-resizable-sw {
       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
@@ -131,3 +121,19 @@ $animation_speed: .3s !default;
   //   pointer-events: none;
   // }
 }
+
+.ui-draggable-dragging,
+.ui-resizable-resizing {
+  z-index: 100;
+
+  > .grid-stack-item-content {
+    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+    opacity: 0.8;
+  }
+}
+.ui-draggable-dragging {
+  will-change: left, top;
+}
+.ui-resizable-resizing {
+  will-change: width, height;
+}

src/h5/dd-base-impl.ts

@@ -9,7 +9,7 @@ export abstract class DDBaseImplement {
   public get disabled(): boolean   { return this._disabled; }
 
   /** @internal */
-  protected _disabled = false;
+  protected _disabled: boolean; // initial state to differentiate from false
   /** @internal */
   protected _eventRegister: {
     [eventName: string]: EventCallback;