Repository navigation
[React] Item Content is missing on Drag and Drop items #2976
Description
Item Content is missing on Drag and Drop items
I asked the question on Slack and I was wising it will be fixed on the new React codebase. However, it still presents in the new code.
Your environment
- tested on commit 16f3fec but it happens on the release before v11.4.0 too
- Version 129.0.6668.70 (Official Build) (64-bit)
Steps to reproduce
cd gridstack.js/react
# apply the diff provided below to `src/demo/demo.tsx`
npm run devdiff --git a/react/src/demo/demo.tsx b/react/src/demo/demo.tsx
index 2e1499b5..5071091c 100644
--- a/react/src/demo/demo.tsx
+++ b/react/src/demo/demo.tsx
@@ -1,5 +1,5 @@
import { ComponentProps, useEffect, useState } from "react";
-import { GridStackOptions, GridStackWidget } from "gridstack";
+import { GridStackOptions, GridStack, GridStackWidget } from "gridstack";
import {
ComponentDataType,
ComponentMap,
@@ -136,8 +136,17 @@ export function GridStackDemo() {
// ! Uncontrolled
const [initialOptions] = useState(gridOptions);
+ useEffect(() => {
+ // setup drag drop behavior
+ let sidebarContent = [
+ { w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}}
+ ];
+ GridStack.setupDragIn('.sidebar-item', undefined, sidebarContent);
+ }, []);
+
return (
<GridStackProvider initialOptions={initialOptions}>
+ <div className="sidebar-item grid-stack-item">Drag nested</div>
<Toolbar />
<GridStackRenderProvider>Expected behavior
The item content shouldn't be missing.
Activity
Aysnine commentedon Mar 4, 2025
An experimental component here: https://github.com/Aysnine/gridstack-react/blob/main/src/examples/004-drag-in/index.tsx
New new react wrapper design on the way.
AO19 commentedon Jun 23, 2025
How are you getting along? Need any help?
Codefox11 commentedon Aug 1, 2025
it's very nice wrapper :)
Codefox11 commentedon Aug 2, 2025
@Aysnine I've one question. when drag element from toolbar, I'd like to use addWidget() after do some actions like calling API and get id for widget etc. how can I do it?
(react) drag-in widget id fix