Dragging by using a handle. about interact.js

[taye]

I've implemented the allowFrom setting.

     * A drag/resize/gesture is started only If the target of the
     * `mousedown`, `pointerdown` or `touchstart` event or any of it's
     * parents match the given CSS selector or Element.

https://raw.githubusercontent.com/taye/interact.js/master/interact.js

[dpekkle]

Here's an implementation based on someone elses jsfiddle.

http://jsfiddle.net/dw3xdhch/43/

You can only drag/drop using the handle provided due to
line 2: allowFrom('.handle')

[taye]

There's no setting for this so you would have to change the target yourself in your event listeners.

I could implement something like an allowFrom options which would be sort of the reverse of ignoreFrom to only start actions from the matching element or it's children.

[DimitarChristoff]

prolly a non-issue but:

https://github.com/taye/interact.js/blob/master/interact.js#L4134

shouldn't this be this._element.querySelector to restrict drag handles to child nodes only? there is no need to take other matching elements into consideration

[taye]

You're right, it should only focus on the child nodes. However, the line that you mentioned is only there to test that the given string is a valid CS selector. I've implemented the behaviour in d67646e for both allowFrom and ignoreFrom.

Thanks for mentioning this!

[kevzlou7979]

Can you give a sample code snippet about the implementation? Thanks great framework

[tylercubell]

When there are two or more handles in a parent element and you need to know which one is being dragged, see https://jsfiddle.net/Lzzrfybg/.