update example

sebkolind · Jul 23, 2024 · aeaac19 · aeaac19
1 parent 5b22965
commit aeaac19
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/example/src/index.html b/example/src/index.html
@@ -25,26 +25,11 @@
         box-sizing: border-box;
       }
 
-      .placeholder {
-        opacity: 0.25;
-      }
-
       .draggy-origin {
         opacity: 0.25;
-        position: relative;
-      }
-      .draggy-origin::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 8px;
-        background-color: #1b1b1b;
       }
-      .draggy-dragging {
-        transform: rotate(2deg);
+      .card.draggy-selection {
+        border-color: blueviolet;
       }
 
       .container {

diff --git a/example/src/main.ts b/example/src/main.ts
@@ -3,4 +3,22 @@ import { draggy } from "@sebkolind/draggy";
 draggy({
   target: ".column",
   placement: "any",
+  onShadow(_, { shadow, multiple }) {
+    if (!multiple?.length) return;
+
+    const label = document.createElement("div");
+    label.textContent = multiple.length.toString();
+    label.style.position = "absolute";
+    label.style.top = "0";
+    label.style.right = "0";
+    label.style.transform = "translate(50%, -50%)";
+    label.style.backgroundColor = "red";
+    label.style.color = "white";
+    label.style.borderRadius = "50%";
+    label.style.padding = "2px 6px";
+    label.style.fontSize = "12px";
+    label.style.zIndex = "9999";
+
+    shadow?.append(label);
+  },
 });