Jump to content
Search Community

Draggable drag and snap to new container

swampthang test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to figure out how to simulate a multitrack Digital Audio Workstation where an audio clip can be dragged up/down to another track channel. The idea is that there would be some top/y resistance to keep the 'clip' moving exactly horizontally until the user purposely dragged vertically in order to move it to a new track channel. Once dragged far enough vertically, the 'clip' would be appended to the new channel (moved from the previous channel) and snapped in place. I've tried to use .deltaY or .startY and .y to detect an amount of movement and then move it that way but it's not working as I hoped it would.

 

Anyone have any great, simple ideas for achieving this?

 

Thanks!

See the Pen YgvKvO by swampthang (@swampthang) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks, Jack. I forked that codepen and played with it. It's important that I'm able to move the block element into the appropriate channel element and liveSnap works beautifully for the initial move. My question is, can 'top' not be a negative value?

 

The reason I ask, is because, I have to reset the top back to 0 once the block element is moved to the new channel div. So, I have to reset the snap array to include negative values. But, when I try to drag upward, it stays locked.

 

Here's the fork: 

See the Pen ywEqWK by swampthang (@swampthang) on CodePen

 

Edited by swampthang
typo
Link to comment
Share on other sites

I think the main problem with your approach there was that you were trying to live-edit a liveSnap array that was passed into the Draggable, but internally Draggable reads that upon creation and sets things up accordingly. In other words, it's not live-editable. You could just re-initialize a Draggable when necessary, like this: 

 

See the Pen 48f972dad69fd0aa340a680e70c2789a by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...