Draggable groups

[OrganicPixels]

Hi guys,

I'm building a bit of unique accordion where the sections are cards that swap on top of each other.  the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0;  I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. 

 

I'm almost there it feels but I can't seems.  Howver my challenge now is to make is so when you have slide 1 open.  if you swipe up from slide 4 to have slide 3 and 2 track up wards with the movement.  I've got it behaving correctly via taps but I really need it work with dragging as well.  any thoughts?

 

Thanks!

Jason 

 

See the Pen VaXbVV by OrganicPixels (@OrganicPixels) on CodePen

[Rodrigo]

Hi Jason and welcome to the GreenSock forums.

 

Draggable has a bounds property in the config object that can impose how far Draggable's target can be moved. You can create an object with the min and max values for that, from the docs:

 

 

bounds : Element | String | Object - to cause the draggable element to stay within the bounds of another DOM element (like a container), you can pass the element likebounds:document.getElementById("container") or a jQuery object is fine too, or even selector text like "#container" which gets passed to whatever TweenLite.selector is. If you prefer, you can define bounds as a rectangle instead, like bounds:{top:100, left:0, width:1000, height:800}which is based on the parent's coordinate system (top/left would be from the upper left corner of the parent). Or you can define specific maximum and minimum values like bounds:{minX:10, maxX:300, minY:50, maxY:500} or bounds:{minRotation:0, maxRotation:270}.

 

Basically you can loop through the elements and set the max and min values using the previous and next elements to set the values. Unfortunately I don't have time now to dig into this. Hopefully another user could chime in and this information is enough to get you going.

[OrganicPixels]

Hi Rodrigo,

Thanks for responding.  However I don't think that's exactly what I'm looking for. My structure doesn't allow me to using the bounds since I'm having items overlap and I want to conditionally move groups of accordion elements with drag.

 

 

 

I've almost gotten to where I need to be but it almost seems like my tween is being reset when the onPress event finishes.  Not sure what's causing that?

 

Anyone who may have insight as to why would really be a big help.

 

 

 

Thanks so much.

Here's an updated state of what I'm working on.

 

See the Pen XdEGNE by OrganicPixels (@OrganicPixels) on CodePen

[OSUblake]

GSAP Tip of the Day - Easy accordions using Flexbox

// Expand container
TweenLite.to(element, 1, { flexGrow: 1 });

// Shrink container
TweenLite.to(element, 1, { flexGrow: 0 });

CodePen URL: 

See the Pen b52cfca05ff7d8a8e9ce3b0213539cf8?editors=0010 by osublake (@osublake) on CodePen

 

That's based on this thread about toggling animations. I see a lot of areas where you could reuse animations like that. 

http://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/

 

 

I don't understand how everything is supposed to work here.

 

What's a swipe?

 

What's the difference between swiping and dragging?

 

What happens on press, click, double-click?

 

What happens if I drag the header around but don't release the mouse? Does it still trigger snapping? Or do you drag/push/pull the other headers around?

 

Here's a demo showing how you can take other elements along for the ride.

See the Pen bNJPwM?editors=0010 by osublake (@osublake) on CodePen

 

I would study CodePen's editor. I think it does pretty much everything you want. You can drag/push/pull other header panels around. There's a close button. And if you double-click on a header... well there's several different open/close animations it will do, depending on the state of the of the other two panels.

[OSUblake]

Depending on how your elements are positioned, you could do bounds like @Rodrigo suggested.

 

So for absolute positioned elements, lets say you have 5 headers that are 50px high, and the window is 1000px high. So if you have the second panel open, there's one header above it, so it's y-min would be 50. And you have three headers below it, so it's y-max would be 1000 - 3 * 50 = 850. 

[OrganicPixels]

Blake,

Thanks for the thorough response.  I'm digging into the codepen you linked to with the "sticky" divs.  I thought about doing it the way you mentioned with the bounds but my content sections are full height and my draggables are wrapping around the content and the headers.  In hind site, not sure if there was a better way to implement the expected behavior.   In either case I'm studying what you've shared.  Thanks again for the input.

 

Jason

[OSUblake]

I made that sticky div demo for a first time user, so it's pretty basic. You've probably noticed by now that it doesn't work that great if you drag really fast. That's because I'm not tracking their positions and I'm really not responding to the collisions.

 

There's usually 2 events associated with a collision, when the objects first make contact, and when they separate. That's when you should make adjustments like making sure they aren't overlapping. You could probably do most of that inside a liveSnap function on your Draggable.

 

I really like what you've got going on here. I was planning on doing something just like this for a side panel, but I wasn't going to start on it right away. You've now given me reason to go ahead and start to looking into different ways to make it. I'll post back here if I come up with anything good.

[OrganicPixels]

Thanks for the feedback Blake. I had to jump to another task temporarily which has delayed my progress on it.  I'm just now coming back to it but I realized I had an issue with my active slider's staying in sync which was causing me some issues.  I'm working on resolving that now and hope to have something a little better soon.

 

 2 quick questions if you don't mind me asking.

 

1. If I wanted to disable specific sections (i.e any section that is not immediately below the active section.  Is there an ideal way to do that.  I tried using the .disable() method but it seems to prevent me all of my instances to mess up and can't seem to re enable them with the event.  Or maybe I just don't understand it well enough. Ideally I'd just apply a class to the ones I want to be effected but didnt' see anything I should be looking for in that case. I may be over thinking that.

 

2. Is it best to add the click handler using tween max for the animations, or should I keep that logic in the onRelease in the draggableCards instance?

 

Thanks again for spending your time replying.  I'm not a js expert and somewhat new to greensock so I'm pretty sure my logic is verbose. I'm sure you have alot of better things you could be doing but all of your feedback is extremely helpful!

[OrganicPixels]

Well I just wanted to follow up with my solution. It took longer then I care to admit and the code feels a bit verbose but it's behaves how I wanted it to.  

 

I used some of the advice from here but also borrowed the technique from this post for dragging multiple elements.

 

http://greensock.com/forums/topic/10407-how-to-drag-multiple-items/

 

when I tried using the collision detection and the example above my tweens were failing to finish out because they were depended on target instance and then got updated when the active index was changed so the tween didn't know which side to snap to. 

 

You can see my solution below.  Thanks again for everyone's help!

 

See the Pen YqvVpQ by OrganicPixels (@OrganicPixels) on CodePen