Support position:absolute for use_draggable_with_options

[frederikbrinck]

Hello there!

Thanks for building and maintaining leptos_use - a great library that provides me with value.

I am currently using the use_draggable function on HtmlElements contained in a centered parent div. The HtmlElements all have position:absolute to have their coordinates relative to the centered parent div. This obviously don't work with the use_draggable which only supports position:fixed.

I would like to provide support for having objects that are positioned relative to their parents with position:absolute draggable. So far, I have found a way to do this with the following code:

diff --git a/src/use_draggable.rs b/src/use_draggable.rs
index 899591a..15be5c5 100644
--- a/src/use_draggable.rs
+++ b/src/use_draggable.rs
@@ -123,16 +123,15 @@ where
             }
 
             if let Some(target) = target.get_untracked() {
-                let target: web_sys::Element = target.into().unchecked_into();
+                let target: web_sys::HtmlElement = target.into().unchecked_into();
 
-                if exact.get_untracked() && event_target::<web_sys::Element>(&event) != target {
+                if exact.get_untracked() && event_target::<web_sys::HtmlElement>(&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(),
+                    x: event.client_x() as f64 - target.offset_left() as f64,
+                    y: event.client_y() as f64 - target.offset_top() as f64,
                 };

Unfortunately, it is not generalizable since it relies on casting the target into an HtmlElement to get the offset_left() and offset_top() attributes. Would you:

1. Be interested in providing this support?
2. If so, I'd be happy to make the contribution to support it. In that regard, would you have a better suggestion on how to support it?

Cheers!

[maccesch]

Hey, thanks for your kind words!

Sure, this sounds like a useful feature.

To make it generalizable I'd suggest providing a configurable function

UseDraggableOptions {
    // ...
    target_offset: Rc<dyn Fn(websys::EventTarget) -> (f64, f64)>
}

that the user can provide to override the default behavior.

What do you think?