Lazy handle

[Armaldio]

My use case is as follow:

When I click an element, a toolbar appear on top of it
This toolbar is next to my root (so not inside) the element

I've readed a bit of the source to find that: https://github.com/rlemaigre/Easy-DnD/blob/master/lib/src/mixins/DragMixin.ts#L49-L51
Handles are queried on mounted

As shown in my case, I have a single toolbar component, and the handle is on demand, relative to the selected element. Also, at the 'mounted' time, the handle doesn't exist

What could be great is to have lazy handles, only evaluated when a drag operation start. Only at this time, the handle will be queried

An other addition could be

- el = this.$el.querySelectorAll(this.handle)
+ el = document.querySelectorAll(this.handle)

to allow any item to be used as handle, anywhere in the page
(I've tried that, but in my case, I had to use a class and it resulted in every items matched to be move)
The key here, for my use case is dynamic handle only available when drag start

I may work on a PR for this but maybe you'll be faster

Thanks!

[rlemaigre]

@Armaldio

The lazy part is easy.

The mousedown listener should be bound to this.$el every time (never to the handle that may not exist on mounted). If a selector is defined in the handle prop, the drag should only be started if the target element of the mousedown event matches the selector (or a descendant node). It's even simpler than the current code.

As for the handle being outside the drag component, would it be okay if the handle prop accepted (in addition to a string) a function that returns a DOM node ? Then the mousedown listener would be bound to the document and the logic is the same as above. Only starting the drag if the target of the mousedown event is a descendant of the node returned by the handle function.

[Armaldio]

About the handle prop being a function, I'm having difficulties imagining how it could look like without a concrete example