Merge pull request #2164 from adumesny/master

custom itemClass fix

Author: adumesny

demo/two.html

@@ -9,6 +9,9 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+  <style type="text/css">
+    .with-lines { border: 1px dotted #777}
+  </style>
 
   <script src="../dist/gridstack-all.js"></script>
 </head>
@@ -59,7 +62,8 @@ <h1>Two grids demo</h1>
       // dragIn: '.sidebar .grid-stack-item', // add draggable to class
       // dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // true or drag-out delete class
-      acceptWidgets: function(el) { return true; } // function example, but can also be: true | false | '.someClass' value
+      // itemClass: 'with-lines', // test a custom additional class #2110
+      acceptWidgets: function(el) { return true } // function example, but can also be: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);
     grids[1].float(false);

doc/CHANGES.md

@@ -80,6 +80,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 7.2.0-dev (TBD)
 * fix [#2162](https://github.com/gridstack/gridstack.js/pull/2162) removing item from a grid (into another) will now call `change` if anything was also modified during the remove
+* fix [#2110](https://github.com/gridstack/gridstack.js/issues/2110) custom `GridStackOptions.itemClass` now works when dragging from outside
 
 ## 7.2.0 (2023-01-07)
 * fix [#1936](https://github.com/gridstack/gridstack.js/issues/1936) some styles left behind after a drag

src/gridstack.ts

@@ -1940,7 +1940,7 @@ export class GridStack {
         }
         dd.off(el, 'drag');
         // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
-        // as the helper will be nuked by jquery-ui otherwise
+        // as the helper will be nuked by jquery-ui otherwise. TODO: update old code path
         if (helper !== el) {
           helper.remove();
           el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info
@@ -1959,6 +1959,8 @@ export class GridStack {
         Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
         Utils.removePositioningStyles(el);// @ts-ignore
         this._writeAttr(el, node);
+        el.className = '';
+        el.classList.add(gridDefaults.itemClass, this.opts.itemClass);
         this.el.appendChild(el);// @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
         if (subGrid) {
           subGrid.parentGridItem = node;
@@ -1976,7 +1978,7 @@ export class GridStack {
 
         // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
         window.setTimeout(() => {
-        // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
+          // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
           if (node.el && node.el.parentElement) {
             this._prepareDragDropByNode(node);
           } else {