Fixes #11

- Fix dashboard draggin: introduced sophistaced drag handle
- Fix disappearing of charts when dragged inside a dashboard widget

src/main/java/com/example/components/Fa.java

@@ -24,7 +24,8 @@ public enum Fa {
     GRID("fa-solid", "fa-table-cells-large"),
     ADD("fa-solid", "fa-plus"),
     REMOVE("fa-solid", "fa-trash"),
-    RESET("fa-solid", "fa-arrow-rotate-left");
+    RESET("fa-solid", "fa-arrow-rotate-left"),
+    DRAG("fa-solid", "fa-grip-vertical");
 
     private final String[] classes;
 

src/main/java/com/example/components/GridStackItem.java

@@ -9,10 +9,19 @@ import java.util.UUID;
  * A single cell inside a {@link GridStackLayout}. Position/size are written as
  * {@code gs-*} attributes, which is how gridstack.js reads a widget's initial
  * placement when {@code makeWidget} converts it client-side (see grid-stack.ts).
+ * <p>
+ * Dragging starts from the grip handle only, never from the item body, so the
+ * components inside an item stay interactive (see
+ * {@link GridStackLayout#setDragHandle(String)}).
  */
 public class GridStackItem extends Div {
 
+    /** Selector gridstack is told to treat as the drag handle — see
+     *  {@link GridStackLayout}'s {@code handle} option. */
+    public static final String DRAG_HANDLE_CLASS = "dialect-drag-handle";
+
     private final Div content = new Div();
+    private final Div dragHandle = new Div();
 
     public GridStackItem(Component... content) {
         this(UUID.randomUUID().toString(), 0, 0, 4, 3, content);
@@ -33,6 +42,15 @@ public class GridStackItem extends Div {
         // own child.
         getElement().appendChild(this.content.getElement());
         this.content.add(content);
+
+        // Sibling of the content wrapper, not a child of it: the wrapper is
+        // `overflow: auto`, so a handle inside it would scroll out of view.
+        dragHandle.addClassName(DRAG_HANDLE_CLASS);
+        dragHandle.add(Fa.DRAG.create());
+        String label = getTranslation("gridstack.dragHandle");
+        dragHandle.getElement().setAttribute("title", label);
+        dragHandle.getElement().setAttribute("aria-label", label);
+        getElement().appendChild(dragHandle.getElement());
     }
 
     public void add(Component... components) {
@@ -52,11 +70,20 @@ public class GridStackItem extends Div {
         return this;
     }
 
+    /** Also hides the grip handle when {@code false} — the {@code gs-no-move}
+     *  attribute written here is what {@code styles.css} keys the handle's
+     *  visibility off. */
     public GridStackItem setMovable(boolean movable) {
         setBooleanAttribute("gs-no-move", !movable);
         return this;
     }
 
+    /** The element gridstack drags the item by. Exposed so callers can restyle
+     *  or reposition it; removing it from the DOM makes the item immovable. */
+    public Div getDragHandle() {
+        return dragHandle;
+    }
+
     /** Writes an explicit "true" (gridstack reads this via its own
      *  {@code Utils.toBool}) or removes the attribute — avoids relying on
      *  Vaadin's HTML5 empty-string boolean-attribute convention, which

src/main/java/com/example/components/GridStackLayout.java

@@ -53,6 +53,10 @@ public class GridStackLayout extends Component implements HasSize, HasStyle {
         options.put("minRow", 1);
         options.put("float", true);
         options.put("animate", true);
+        // gridstack's default handle is `.grid-stack-item-content`, i.e. the
+        // whole widget, which swallows clicks meant for the components inside
+        // it. Restrict dragging to the grip each GridStackItem renders.
+        options.put("handle", "." + GridStackItem.DRAG_HANDLE_CLASS);
     }
 
     public GridStackLayout setColumn(int column) {
@@ -85,6 +89,14 @@ public class GridStackLayout extends Component implements HasSize, HasStyle {
         return this;
     }
 
+    /** Overrides the selector items are dragged by (default: the grip rendered
+     *  by {@link GridStackItem}). The selector must match an element inside the
+     *  item. */
+    public GridStackLayout setDragHandle(String selector) {
+        options.put("handle", selector);
+        return this;
+    }
+
     public GridStackLayout setStaticGrid(boolean staticGrid) {
         options.put("staticGrid", staticGrid);
         return this;