From aeaac195245007672a44e70b7807e30fd5670baf Mon Sep 17 00:00:00 2001
From: sebkolind <sks1993@gmail.com>
Date: Tue, 23 Jul 2024 15:44:26 +0200
Subject: [PATCH] update example

---
 example/src/index.html | 19 ++-----------------
 example/src/main.ts    | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/example/src/index.html b/example/src/index.html
index 82ca50c..756349d 100644
--- 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
index 907e098..e44ef4b 100644
--- 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);
+  },
 });