New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dragging by using a handle. #66

Closed
matula opened this Issue Aug 14, 2014 · 7 comments

Comments

Projects
None yet
6 participants
@matula

matula commented Aug 14, 2014

This is a great library, thanks for the work and releasing it!
I was wondering if there was a way to make an element draggable, but only by clicking a handle in the element? That way, the whole element isn't clickable. Thanks!

@taye

This comment has been minimized.

Show comment
Hide comment
@taye

taye Aug 15, 2014

Owner

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.

Owner

taye commented Aug 15, 2014

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.

@taye

This comment has been minimized.

Show comment
Hide comment
@taye

taye Aug 31, 2014

Owner

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

Owner

taye commented Aug 31, 2014

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

@DimitarChristoff

This comment has been minimized.

Show comment
Hide comment
@DimitarChristoff

DimitarChristoff Sep 4, 2014

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

DimitarChristoff commented Sep 4, 2014

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Sep 4, 2014

Owner

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!

Owner

taye commented Sep 4, 2014

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!

@taye taye closed this Sep 14, 2014

@kevzlou7979

This comment has been minimized.

Show comment
Hide comment
@kevzlou7979

kevzlou7979 Feb 12, 2016

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

kevzlou7979 commented Feb 12, 2016

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

@dpekkle

This comment has been minimized.

Show comment
Hide comment
@dpekkle

dpekkle Mar 22, 2016

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')

dpekkle commented Mar 22, 2016

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')

@tylercubell

This comment has been minimized.

Show comment
Hide comment
@tylercubell

tylercubell Dec 28, 2017

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/.

tylercubell commented Dec 28, 2017

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/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment