Create Example for isDraggedOver and containerDrag events

example/src/App.vue

@@ -8,6 +8,7 @@ import Example6Disabled from "./Example6Disabled.vue";
 import Example7DisabledItems from "./Example7DisabledItems.vue";
 import Example8Responsive from "./Example8Responsive.vue";
 import Example9MultipleItemsY from "./Example9MultipleItemsY.vue";
+import ExampleAOverlay from "./ExampleAOverlay.vue";
 </script>
 
 <template>
@@ -96,6 +97,15 @@ import Example9MultipleItemsY from "./Example9MultipleItemsY.vue";
       width of every item has to be <kbd>1</kbd>)
     </p>
     <example9-multiple-items-y />
+
+    <h2>Example 10:</h2>
+    <p>
+      This example shows, how one can find out, if the user is dragging an item,
+      which item is being dragged and which grid is being dragged over. This is
+      an example for the proper <kbd>isDraggedOver</kbd> and the
+      <kbd>containerDragStart</kbd> and <kbd>containerDragEnd</kbd> events.
+    </p>
+    <example-a-overlay />
   </div>
 </template>
 

example/src/ExampleAOverlay.vue

+<script>
+function initialState() {
+  return {
+    items: [
+      {
+        key: "key1",
+        x: 1,
+        y: 5,
+        w: 1,
+        h: 1,
+        data: { name: "Cat", grid: false },
+      },
+      {
+        key: "key2",
+        x: 4,
+        y: 3,
+        w: 1,
+        h: 1,
+        data: { name: "Penguin", grid: false },
+      },
+      {
+        key: "key3",
+        x: 2,
+        y: 3,
+        w: 1,
+        h: 1,
+        data: { name: "Dog", grid: false },
+      },
+      {
+        key: "key4",
+        x: 5,
+        y: 4,
+        w: 1,
+        h: 1,
+        data: { name: "Chinchilla", grid: false },
+      },
+      {
+        key: "key5",
+        x: 5,
+        y: 1,
+        w: 1,
+        h: 1,
+        data: { name: "Iguana", grid: false },
+      },
+      {
+        key: "key6",
+        x: 3,
+        y: 4,
+        w: 1,
+        h: 1,
+        data: { name: "Axolotl", grid: true },
+        disabled: true,
+      },
+    ],
+    overlays: [
+      { key: "overlay1", x: 2, y: 2, animal: "Dog" },
+      { key: "overlay2", x: 3, y: 5, animal: "Iguana" },
+      { key: "overlay3", x: 4, y: 2, animal: "Chinchilla" },
+      { key: "overlay4", x: 2, y: 4, animal: "Penguin" },
+      { key: "overlay5", x: 4, y: 4, animal: "Cat" },
+    ],
+    dragged: {
+      key1: false,
+      key2: false,
+      key3: false,
+      key4: false,
+      key5: false,
+      key6: false,
+    },
+    showOverlayOnlyOnDragover: false,
+    showAllHighlights: false,
+  };
+}
+
+export default {
+  name: "ExampleAOverlay",
+  data() {
+    return initialState();
+  },
+  methods: {
+    handleItemChanged(element, gridId) {
+      if (gridId === "second-grid" && element.originGridId === "second-grid") {
+        // Disable movement inside the second grid
+        return;
+      }
+
+      let overlay = this.overlays.find((o) => o.animal === element.data.name);
+      this.items.map((item) => {
+        if (item.key === element.key) {
+          item.data.grid = gridId === "ov-grid";
+          item.x = element.x;
+          item.y = element.y;
+          item.disabled =
+            overlay && overlay.x === element.x && overlay.y === element.y;
+        }
+        return item;
+      });
+      if (overlay && overlay.x === element.x && overlay.y === element.y) {
+        this.overlays = this.overlays.filter((o) => o.key !== overlay.key);
+      }
+    },
+    reset() {
+      Object.assign(this.$data, initialState());
+    },
+    handleContainerDrag(element, type) {
+      this.dragged[element.key] = type === "start";
+    },
+  },
+  computed: {
+    gridOneItems() {
+      return this.items.filter((item) => item.data.grid);
+    },
+    gridTwoItems() {
+      return this.items
+        .filter((item) => !item.data.grid)
+        .map((item) => ({
+          ...item,
+          x: () => 0,
+          y: () => 0,
+          disabled: false,
+        }));
+    },
+    computedOverlays() {
+      if (this.showAllHighlights) {
+        return Object.values(this.dragged).some((obj) => !!obj)
+          ? this.overlays
+          : [];
+      }
+      return this.overlays.filter(
+        (o) =>
+          this.dragged[
+            ((a) => (a ? a.key : a))(
+              // Get the key of the dragged item or null
+              this.items.find((item) => item.data.name === o.animal),
+            )
+          ],
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <drag-grid
+      :value="gridOneItems"
+      :cols="5"
+      :rows="5"
+      id="ov-grid"
+      context="animals"
+      grid-id="ov-grid"
+      @itemChanged="handleItemChanged($event, 'ov-grid')"
+      @containerDragStart="handleContainerDrag($event, 'start')"
+      @containerDragEnd="handleContainerDrag($event, 'end')"
+    >
+      <template #item="{ rawItem }">
+        <div :class="{ container: true, disabled: rawItem.disabled }">
+          <span>{{ rawItem.data.name }}</span>
+        </div>
+      </template>
+      <template #default="{ isDraggedOver }">
+        <div
+          class="container goal"
+          v-for="goal in computedOverlays"
+          v-show="isDraggedOver || !showOverlayOnlyOnDragover"
+          :key="goal.key"
+          :style="{
+            gridColumn: goal.x + ' / span 1',
+            gridRow: goal.y + ' / span 1',
+          }"
+        >
+          {{ goal.animal }} here!
+        </div>
+      </template>
+    </drag-grid>
+    <drag-grid
+      :value="gridTwoItems"
+      :cols="1"
+      :rows="5"
+      id="second-grid"
+      context="animals"
+      grid-id="second-grid"
+      no-highlight
+      @itemChanged="handleItemChanged($event, 'second-grid')"
+      @containerDragStart="handleContainerDrag($event, 'start')"
+      @containerDragEnd="handleContainerDrag($event, 'end')"
+    >
+      <template #item="{ rawItem }">
+        <div :class="{ container: true, disabled: rawItem.disabled }">
+          <span>{{ rawItem.data.name }}</span>
+        </div>
+      </template>
+    </drag-grid>
+    <span>
+      <button @click="reset">Reset</button><br />
+      <button @click="showOverlayOnlyOnDragover = !showOverlayOnlyOnDragover">
+        Show overlay
+        {{ showOverlayOnlyOnDragover ? "always" : "only on dragover" }}</button
+      ><br />
+      <button @click="showAllHighlights = !showAllHighlights">
+        {{
+          showAllHighlights
+            ? "Only show overlay for dragged item"
+            : "Show overlay for all items"
+        }}
+      </button>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+#ov-grid,
+#second-grid {
+  max-width: 600px;
+  border-radius: 1em;
+  border: 0.2em solid #e0e0e0;
+  box-shadow: 0.2em 0.2em 0 0.1em #bdc3c7;
+  padding: 0.3em 0.4em 0.4em 0.3em;
+}
+
+#second-grid {
+  width: fit-content;
+  height: 100%;
+}
+
+div {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  align-items: stretch;
+}
+
+.container {
+  background: #3498db;
+  color: #ecf0f1;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  text-align: center;
+  border-radius: 0.6em;
+  box-shadow: #2980b9 0.1em 0.1em 0 0.1em;
+  min-height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container.disabled {
+  background: #bdc3c7;
+  box-shadow: #95a5a6 0.1em 0.1em 0 0.1em;
+}
+
+.container.goal {
+  background: #2ecc71;
+  box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+}
+
+button {
+  margin-top: 1em;
+  padding: 0.5em 1em;
+  border-radius: 0.5em;
+  border: 0.2em solid #e0e0e0;
+  background: #ecf0f1;
+  color: #3498db;
+  font-weight: bold;
+  cursor: pointer;
+}
+</style>