Feature request: allow for separate drag handle

[isteven]

Environments

• Framework name: React
• Framework version: 16.10.2
• Moveable Component version: 0.19.1
• Testable Address(optional): N/A

Description

As per title, would be great if the drag handle can be a separate element, like:

<div class="panel"> // this can accept other things like resize, rotate etc.. 
    <div class="header">HEADER</div> // ... but this is the only element which can accept drag
    <div class="content">CONTENT</div>
</div>

Visually, something like this

I'm quite sure a lot of people will appreciate this, as I believe many of us use this library to build some sort of multi panel / tab / window application on the web.

Thank you!

[iprasadg]

Yes seperate drag handle will be very helpful and user friendly. #148

[mellinger]

It's not too crazy to implement like this:

  moveable.on("dragStart", (event) => {
    if (!event.inputEvent.srcElement.classList.contains("handle")) {
      event.stop();
    }
  });

[isteven]

It's not too crazy to implement like this:

  moveable.on("dragStart", (event) => {
    if (!event.inputEvent.srcElement.classList.contains("handle")) {
      event.stop();
    }
  });

@mellinger how do I implement this for the React version of the library? By default the dragStart event doesn't pass event object.

(And yes I'm a React noob)

[daybrush]

@isteven @mellinger @iprasadg

moveable's new version is released.

• moveable 0.17.1
• react-moveable 0.20.1
• preact-moveable 0.19.1
• ngx-moveable 0.13.1
• svelte-moveable 0.8.1

add dragTarget, props.

like this:

moveable.dragTarget = document.querySelector(".otherTarget");

https://daybrush.com/moveable/release/latest/doc/Moveable.html#dragTarget

[isteven]

Hi @daybrush,

Thank you! I will try in the next few days.

To use it in the React version, is it like this?

render() {
    return (
        <Moveable
            target={document.querySelector(".target")}
            dragTarget={document.querySelector(".otherTarget")}
            ...
            ...
        />
    )
}

[daybrush]

@isteven yes.

[isteven]

Hi @daybrush ,

Thanks for 0.20.1 update, I am currently trying it as per your advice.

However, I encountered this error:

The context, if they can help:

• This is a multi target element situation
• In my use case, my target element is quite complicated, so there's a probability that it's loaded after Moveable is loaded.
• I only need dragable & resizable

I was merely following your documentation: