added use_draggable

2025-01-22 16:49:22 -05:00 · 2023-07-17 03:17:08 +01:00 · 2023-07-17 03:17:08 +01:00 · c81eacd977
commit c81eacd977
parent e529d110bc
20 changed files with 878 additions and 6 deletions
--- a/.idea/icon.svg
+++ b/.idea/icon.svg
@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <style>
+        path.black {
+            fill: #1e1838;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            path.black {
+                fill: white;
+            }
+        }
+    </style>
+    <path d="M16.114,22.343c-1.714,-0 -3.2,-0.914 -3.885,-2.514c-0.458,-1.029 -0.572,-2.172 -0.229,-3.315c0.343,-1.143 1.143,-1.943 2.171,-2.514c0.572,-0.343 1.258,-0.457 1.829,-0.457c1.714,-0 3.2,0.914 3.886,2.514c1.028,2.172 0.114,4.8 -2.057,5.829c-0.458,0.228 -1.029,0.457 -1.715,0.457Z"
+          style="fill:#e1393a;fill-rule:nonzero;"/>
+    <path d="M16.114,15.943c0.572,-0 1.486,0.343 1.829,1.143c0.343,0.685 0.228,1.257 0.114,1.6c-0.114,0.343 -0.343,0.8 -1.028,1.143c-0.229,0.114 -0.572,0.228 -0.915,0.228c-0.571,0 -1.485,-0.343 -1.828,-1.143c-0.457,-1.028 -0.115,-2.285 0.914,-2.743c0.343,-0.228 0.571,-0.228 0.914,-0.228Zm0,-4.572c-0.914,0 -1.943,0.229 -2.857,0.686c-3.314,1.486 -4.686,5.486 -3.086,8.8c1.143,2.4 3.543,3.772 5.943,3.772c0.915,-0 1.943,-0.229 2.857,-0.686c3.315,-1.6 4.686,-5.6 3.086,-8.8c-1.143,-2.4 -3.428,-3.772 -5.943,-3.772Z"
+          style="fill:#e1393a;fill-rule:nonzero;"/>
+    <path d="M16.114,6.114c-0.8,0 -1.485,-0.457 -1.828,-1.143c-0.457,-1.028 -0,-2.171 0.914,-2.628c0.229,-0.114 0.571,-0.229 0.914,-0.229c0.8,0 1.486,0.457 1.829,1.143c0.457,1.029 0.114,2.172 -0.914,2.629c-0.343,0.114 -0.572,0.228 -0.915,0.228Z"
+          style="fill:#e1393a;fill-rule:nonzero;"/>
+    <path d="M16.114,3.829c0,-0 0.229,-0 0.229,0.114c0.114,0.114 -0,0.343 -0.114,0.343l-0.115,-0c0,-0 -0.228,-0 -0.228,-0.115c-0.115,-0.114 -0,-0.342 0.114,-0.342l0.114,-0Zm0,-3.429c-0.571,-0 -1.143,0.114 -1.6,0.343c-1.828,0.914 -2.628,3.086 -1.714,5.028c0.686,1.372 1.943,2.058 3.314,2.058c0.572,-0 1.143,-0.115 1.6,-0.343c1.829,-0.915 2.629,-3.086 1.715,-4.915c-0.572,-1.371 -1.943,-2.171 -3.315,-2.171Z"
+          style="fill:#e1393a;fill-rule:nonzero;"/>
+    <path class="black"
+          d="M27.314,10.914c0,-0.114 -0.114,-0.343 -0.343,-0.571c0,-0.114 -0.114,-0.229 -0.114,-0.229c-0.457,-0.8 -1.143,-1.943 -1.143,-1.943l-2.514,1.486l1.486,2.629c1.943,3.657 2.057,7.657 0.571,10.857c-1.6,3.428 -5.028,5.371 -9.143,5.371c-4.228,0 -7.543,-1.943 -9.143,-5.371c-1.6,-3.2 -1.371,-7.2 0.572,-10.857l1.6,-2.629l-2.743,-1.486c-0,0 -0.686,1.029 -1.143,1.943c-0.114,0 -0.228,0.115 -0.228,0.229c-0.115,0.228 -0.229,0.457 -0.343,0.571c-2.286,4.572 -2.515,9.486 -0.457,13.715c2.171,4.457 6.4,6.971 11.771,6.971c5.257,0 9.6,-2.514 11.771,-6.971c2.058,-4.229 1.829,-9.258 -0.457,-13.715Z"
+          style="fill-rule:nonzero;"/>
+</svg>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### New Functions 🚀

+- `use_draggable`
 - `use_to_string`
 - `is_err`
 - `is_ok`
--- a/Cargo.toml
+++ b/Cargo.toml
@ -32,6 +32,7 @@ features = [
    "CloseEvent",
    "CustomEvent",
    "CustomEventInit",
+    "DomRect",
    "DomRectReadOnly",
    "DataTransfer",
    "DragEvent",
@ -51,6 +52,7 @@ features = [
    "MutationRecord",
    "Navigator",
    "NodeList",
+    "PointerEvent",
    "ResizeObserver",
    "ResizeObserverBoxOptions",
    "ResizeObserverEntry",
--- a/docs/book/src/SUMMARY.md
+++ b/docs/book/src/SUMMARY.md
@ -16,6 +16,7 @@

 - [use_active_element](elements/use_active_element.md)
 - [use_document_visibility](elements/use_document_visibility.md)
+- [use_draggable](elements/use_draggable.md)
 - [use_drop_zone](elements/use_drop_zone.md)
 - [use_element_size](elements/use_element_size.md)
 - [use_element_visibility](elements/use_element_visibility.md)
--- a/docs/book/src/elements/use_draggable.md
+++ b/docs/book/src/elements/use_draggable.md
@ -0,0 +1,3 @@
+# use_draggable
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_draggable  -->
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@ -2,10 +2,6 @@
 resolver = "2"

 members = [
-    "is_err",
-    "is_none",
-    "is_ok",
-    "is_some",
    "on_click_outside",
    "use_abs",
    "use_active_element",
@ -16,6 +12,7 @@ members = [
    "use_cycle_list",
    "use_debounce_fn",
    "use_document_visibility",
+    "use_draggable",
    "use_drop_zone",
    "use_element_hover",
    "use_element_size",
@ -36,7 +33,6 @@ members = [
    "use_scroll",
    "use_storage",
    "use_throttle_fn",
-    "use_to_string",
    "use_websocket",
    "use_window_focus",
    "use_window_scroll",
--- a/examples/use_draggable/Cargo.toml
+++ b/examples/use_draggable/Cargo.toml
@ -0,0 +1,16 @@
+[package]
+name = "use_draggable"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.4", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
--- a/examples/use_draggable/README.md
+++ b/examples/use_draggable/README.md
@ -0,0 +1,23 @@
+A simple example for `use_draggable`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
--- a/examples/use_draggable/Trunk.toml
+++ b/examples/use_draggable/Trunk.toml
@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
--- a/examples/use_draggable/index.html
+++ b/examples/use_draggable/index.html
@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-trunk rel="css" href="style/output.css">
+  </head>
+  <body></body>
+</html>
--- a/examples/use_draggable/input.css
+++ b/examples/use_draggable/input.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/examples/use_draggable/rust-toolchain.toml
+++ b/examples/use_draggable/rust-toolchain.toml
@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
--- a/examples/use_draggable/src/main.rs
+++ b/examples/use_draggable/src/main.rs
@ -0,0 +1,48 @@
+use leptos::html::Div;
+use leptos::*;
+use leptos_use::core::Position;
+use leptos_use::docs::demo_or_body;
+use leptos_use::{use_draggable_with_options, UseDraggableOptions, UseDraggableReturn};
+
+#[component]
+fn Demo(cx: Scope) -> impl IntoView {
+    let el = create_node_ref::<Div>(cx);
+
+    let inner_width = window().inner_width().unwrap().as_f64().unwrap();
+
+    let UseDraggableReturn { x, y, style, .. } = use_draggable_with_options(
+        cx,
+        el,
+        UseDraggableOptions::default()
+            .initial_value(Position {
+                x: inner_width / 4.2,
+                y: 80.0,
+            })
+            .prevent_default(true),
+    );
+
+    view! { cx,
+        <p class="italic op50 text-center">
+            Check the floating box
+        </p>
+        <div
+            node_ref=el
+            class="px-4 py-2 border border-gray-400/30 rounded shadow hover:shadow-lg fixed bg-[--bg] select-none cursor-move z-24"
+            style=move || format!("touch-action: none; {}", style())
+        >
+            "👋 Drag me!"
+            <div class="text-sm opacity-50">
+                I am at { move || x().round() }, { move || y().round() }
+            </div>
+        </div>
+    }
+}
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    mount_to(demo_or_body(), |cx| {
+        view! { cx, <Demo /> }
+    })
+}
--- a/examples/use_draggable/style/output.css
+++ b/examples/use_draggable/style/output.css
@ -0,0 +1,367 @@
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input::placeholder,textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+[multiple],[size]:where(select:not([size="1"])) {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+  border-radius: 0px;
+}
+
+[type='radio'] {
+  border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+[type='checkbox']:checked,[type='radio']:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file'] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus {
+  outline: 1px solid ButtonText;
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-gray-400\/30 {
+  border-color: rgb(156 163 175 / 0.3);
+}
+
+.border-gray-400\/50 {
+  border-color: rgb(156 163 175 / 0.5);
+}
+
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.bg-\[--bg\] {
+  background-color: var(--bg);
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.text-\[--brand-color\] {
+  color: var(--brand-color);
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:text-green-500 {
+    --tw-text-opacity: 1;
+    color: rgb(34 197 94 / var(--tw-text-opacity));
+  }
+}
--- a/examples/use_draggable/tailwind.config.js
+++ b/examples/use_draggable/tailwind.config.js
@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: {
+        files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
+    },
+    theme: {
+        extend: {},
+    },
+    corePlugins: {
+        preflight: false,
+    },
+    plugins: [
+        require('@tailwindcss/forms'),
+    ],
+}
--- a/src/core/mod.rs
+++ b/src/core/mod.rs
@ -1,6 +1,7 @@
 mod element_maybe_signal;
 mod elements_maybe_signal;
 mod maybe_rw_signal;
+mod pointer_type;
 mod position;
 mod size;
 mod storage;
@ -8,6 +9,7 @@ mod storage;
 pub use element_maybe_signal::*;
 pub use elements_maybe_signal::*;
 pub use maybe_rw_signal::*;
+pub use pointer_type::*;
 pub use position::*;
 pub use size::*;
 pub use storage::*;
--- a/src/core/pointer_type.rs
+++ b/src/core/pointer_type.rs
@ -0,0 +1,32 @@
+use std::fmt::Display;
+use std::str::FromStr;
+
+#[derive(Debug, PartialEq, Eq, Clone, Copy, Hash)]
+pub enum PointerType {
+    Mouse,
+    Touch,
+    Pen,
+}
+
+impl Display for PointerType {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::Mouse => write!(f, "mouse"),
+            Self::Touch => write!(f, "touch"),
+            Self::Pen => write!(f, "pen"),
+        }
+    }
+}
+
+impl FromStr for PointerType {
+    type Err = ();
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        match s {
+            "mouse" => Ok(Self::Mouse),
+            "touch" => Ok(Self::Touch),
+            "pen" => Ok(Self::Pen),
+            _ => Err(()),
+        }
+    }
+}
--- a/src/core/position.rs
+++ b/src/core/position.rs
@ -1,4 +1,4 @@
-#[derive(Copy, Clone)]
+#[derive(Copy, Clone, Default)]
 pub struct Position {
    pub x: f64,
    pub y: f64,
--- a/src/lib.rs
+++ b/src/lib.rs
@ -21,6 +21,7 @@ cfg_if! { if #[cfg(web_sys_unstable_apis)] {
 }}

 mod on_click_outside;
+mod use_draggable;
 mod use_to_string;
 mod is_err;
 mod is_ok;
@ -61,6 +62,7 @@ mod watch_throttled;
 mod whenever;

 pub use on_click_outside::*;
+pub use use_draggable::*;
 pub use use_to_string::*;
 pub use is_err::*;
 pub use is_ok::*;
--- a/src/use_draggable.rs
+++ b/src/use_draggable.rs
@ -0,0 +1,323 @@
+use crate::core::{ElementMaybeSignal, MaybeRwSignal, PointerType, Position};
+use crate::use_event_listener_with_options;
+use crate::utils::{CloneableFnMutWithArg, CloneableFnWithArgAndReturn};
+use default_struct_builder::DefaultBuilder;
+use leptos::ev::{pointerdown, pointermove, pointerup};
+use leptos::*;
+use std::marker::PhantomData;
+use wasm_bindgen::JsCast;
+use web_sys::PointerEvent;
+
+///
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_draggable)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// use leptos::html::Div;
+/// # use leptos_use::{use_draggable_with_options, UseDraggableOptions, UseDraggableReturn};
+/// use leptos_use::core::Position;
+/// #
+/// # #[component]
+/// # fn Demo(cx: Scope) -> impl IntoView {
+/// let el = create_node_ref::<Div>(cx);
+///
+/// // `style` is a helper string "left: {x}px; top: {y}px;"
+/// let UseDraggableReturn {
+///     x,
+///     y,
+///     style,
+///     ..
+/// } = use_draggable_with_options(
+///     cx,
+///     el,
+///     UseDraggableOptions::default().initial_value(Position { x: 40.0, y: 40.0 }),
+/// );
+///
+/// view! { cx,
+///     <div node_ref=el style=move || format!("position: fixed; {}", style.get())>
+///         Drag me! I am at { x }, { y }
+///     </div>
+/// }
+/// # }
+/// ```
+pub fn use_draggable<El, T>(cx: Scope, target: El) -> UseDraggableReturn
+where
+    (Scope, El): Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
+    T: Into<web_sys::EventTarget> + Clone + 'static,
+{
+    use_draggable_with_options::<
+        El,
+        T,
+        web_sys::EventTarget,
+        web_sys::EventTarget,
+        web_sys::EventTarget,
+        web_sys::EventTarget,
+    >(cx, target, UseDraggableOptions::default())
+}
+
+/// Version of [`use_draggable`] that takes a `UseDraggableOptions`. See [`use_draggable`] for how to use.
+pub fn use_draggable_with_options<El, T, DragEl, DragT, HandleEl, HandleT>(
+    cx: Scope,
+    target: El,
+    options: UseDraggableOptions<DragEl, DragT, HandleEl, HandleT>,
+) -> UseDraggableReturn
+where
+    (Scope, El): Into<ElementMaybeSignal<T, web_sys::EventTarget>>,
+    T: Into<web_sys::EventTarget> + Clone + 'static,
+    DragEl: Clone,
+    (Scope, DragEl): Into<ElementMaybeSignal<DragT, web_sys::EventTarget>>,
+    DragT: Into<web_sys::EventTarget> + Clone + 'static,
+    (Scope, HandleEl): Into<ElementMaybeSignal<HandleT, web_sys::EventTarget>>,
+    HandleT: Into<web_sys::EventTarget> + Clone + 'static,
+{
+    let UseDraggableOptions {
+        exact,
+        prevent_default,
+        stop_propagation,
+        dragging_element,
+        handle,
+        pointer_types,
+        initial_value,
+        on_start,
+        on_move,
+        on_end,
+        ..
+    } = options;
+
+    let target = (cx, target).into();
+
+    let dragging_handle = if let Some(handle) = handle {
+        let handle = (cx, handle).into();
+        Signal::derive(cx, move || handle.get().map(|handle| handle.into()))
+    } else {
+        let target = target.clone();
+        Signal::derive(cx, move || target.get().map(|target| target.into()))
+    };
+
+    let (position, set_position) = initial_value.into_signal(cx);
+    let (start_position, set_start_position) = create_signal(cx, None::<Position>);
+
+    let filter_event = move |event: &PointerEvent| {
+        let ty = event.pointer_type();
+        pointer_types.iter().any(|p| p.to_string() == ty)
+    };
+
+    let handle_event = move |event: PointerEvent| {
+        if prevent_default.get_untracked() {
+            event.prevent_default();
+        }
+        if stop_propagation.get_untracked() {
+            event.stop_propagation();
+        }
+    };
+
+    let on_pointer_down = {
+        let filter_event = filter_event.clone();
+
+        move |event: PointerEvent| {
+            if !filter_event(&event) {
+                return;
+            }
+
+            if let Some(target) = target.get_untracked() {
+                let target: web_sys::Element = target.into().unchecked_into();
+
+                if exact.get_untracked() && event_target::<web_sys::Element>(&event) != target {
+                    return;
+                }
+
+                let rect = target.get_bounding_client_rect();
+                let position = Position {
+                    x: event.client_x() as f64 - rect.left(),
+                    y: event.client_y() as f64 - rect.top(),
+                };
+                if !on_start.clone()(UseDraggableCallbackArgs {
+                    position,
+                    event: event.clone(),
+                }) {
+                    return;
+                }
+                set_start_position.set(Some(position));
+                handle_event(event);
+            }
+        }
+    };
+
+    let on_pointer_move = {
+        let filter_event = filter_event.clone();
+
+        move |event: PointerEvent| {
+            if !filter_event(&event) {
+                return;
+            }
+            if let Some(start_position) = start_position.get_untracked() {
+                let position = Position {
+                    x: event.client_x() as f64 - start_position.x,
+                    y: event.client_y() as f64 - start_position.y,
+                };
+                set_position.set(position);
+                on_move.clone()(UseDraggableCallbackArgs {
+                    position,
+                    event: event.clone(),
+                });
+                handle_event(event);
+            }
+        }
+    };
+
+    let on_pointer_up = move |event: PointerEvent| {
+        if !filter_event(&event) {
+            return;
+        }
+        if start_position.get_untracked().is_none() {
+            return;
+        }
+        set_start_position.set(None);
+        on_end.clone()(UseDraggableCallbackArgs {
+            position: position.get_untracked(),
+            event: event.clone(),
+        });
+        handle_event(event);
+    };
+
+    let mut listener_options = web_sys::AddEventListenerOptions::new();
+    listener_options.capture(true);
+
+    let _ = use_event_listener_with_options(
+        cx,
+        dragging_handle,
+        pointerdown,
+        on_pointer_down,
+        listener_options.clone(),
+    );
+    let _ = use_event_listener_with_options(
+        cx,
+        dragging_element.clone(),
+        pointermove,
+        on_pointer_move,
+        listener_options.clone(),
+    );
+    let _ = use_event_listener_with_options(
+        cx,
+        dragging_element,
+        pointerup,
+        on_pointer_up,
+        listener_options,
+    );
+
+    UseDraggableReturn {
+        x: Signal::derive(cx, move || position.get().x),
+        y: Signal::derive(cx, move || position.get().y),
+        position,
+        set_position,
+        is_dragging: Signal::derive(cx, move || start_position.get().is_some()),
+        style: Signal::derive(cx, move || {
+            let position = position.get();
+            format!("left: {}px; top: {}px;", position.x, position.y)
+        }),
+    }
+}
+
+/// Options for [`use_draggable_with_options`].
+#[derive(DefaultBuilder)]
+pub struct UseDraggableOptions<DragEl, DragT, HandleEl, HandleT>
+where
+    (Scope, DragEl): Into<ElementMaybeSignal<DragT, web_sys::EventTarget>>,
+    DragT: Into<web_sys::EventTarget> + Clone + 'static,
+    (Scope, HandleEl): Into<ElementMaybeSignal<HandleT, web_sys::EventTarget>>,
+    HandleT: Into<web_sys::EventTarget> + Clone + 'static,
+{
+    /// Only start the dragging when click on the element directly. Defaults to `false`.
+    #[builder(into)]
+    exact: MaybeSignal<bool>,
+
+    /// Prevent events defaults. Defaults to `false`.
+    #[builder(into)]
+    prevent_default: MaybeSignal<bool>,
+
+    /// Prevent events propagation. Defaults to `false`.
+    #[builder(into)]
+    stop_propagation: MaybeSignal<bool>,
+
+    /// Element to attach `pointermove` and `pointerup` events to. Defaults to `window`.
+    dragging_element: DragEl,
+
+    /// Handle that triggers the drag event. Defaults to `target`.
+    handle: Option<HandleEl>,
+
+    /// Pointer types that listen to. Defaults to `[Mouse, Touch, Pen]`.
+    pointer_types: Vec<PointerType>,
+
+    /// Initial position of the element. Defaults to `{ x: 0, y: 0 }`.
+    #[builder(into)]
+    initial_value: MaybeRwSignal<Position>,
+
+    /// Callback when the dragging starts. Return `false` to prevent dragging.
+    on_start: Box<dyn CloneableFnWithArgAndReturn<UseDraggableCallbackArgs, bool>>,
+
+    /// Callback during dragging.
+    on_move: Box<dyn CloneableFnMutWithArg<UseDraggableCallbackArgs>>,
+
+    /// Callback when dragging end.
+    on_end: Box<dyn CloneableFnMutWithArg<UseDraggableCallbackArgs>>,
+
+    #[builder(skip)]
+    _marker1: PhantomData<DragT>,
+    #[builder(skip)]
+    _marker2: PhantomData<HandleT>,
+}
+
+impl Default
+    for UseDraggableOptions<
+        web_sys::EventTarget,
+        web_sys::EventTarget,
+        web_sys::EventTarget,
+        web_sys::EventTarget,
+    >
+{
+    fn default() -> Self {
+        Self {
+            exact: MaybeSignal::default(),
+            prevent_default: MaybeSignal::default(),
+            stop_propagation: MaybeSignal::default(),
+            dragging_element: window().into(),
+            handle: None,
+            pointer_types: vec![PointerType::Mouse, PointerType::Touch, PointerType::Pen],
+            initial_value: MaybeRwSignal::default(),
+            on_start: Box::new(|_| true),
+            on_move: Box::new(|_| {}),
+            on_end: Box::new(|_| {}),
+            _marker1: PhantomData,
+            _marker2: PhantomData,
+        }
+    }
+}
+
+/// Argument for the `on_...` handler functions of [`UseDraggableOptions`].
+pub struct UseDraggableCallbackArgs {
+    /// Position of the `target` element
+    pub position: Position,
+    /// Original `PointerEvent` from the event listener
+    pub event: PointerEvent,
+}
+
+/// Return type of [`use_draggable`].
+pub struct UseDraggableReturn {
+    /// X coordinate of the element
+    pub x: Signal<f64>,
+    /// Y coordinate of the element
+    pub y: Signal<f64>,
+    /// Position of the element
+    pub position: Signal<Position>,
+    /// Set the position of the element manually
+    pub set_position: WriteSignal<Position>,
+    /// Whether the element is being dragged
+    pub is_dragging: Signal<bool>,
+    /// Style attribute "left: {x}px; top: {y}px;"
+    pub style: Signal<String>,
+}