Jump to content
Search Community

Collision Detection and Revert, Editable Divs, Adding Divs on the fly, Persistence ... many questions!

mjpaton 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

Hi all,

 

I've been playing with GSAP for the last few days figuring out if it will meet my needs, and was hoping for a bit of direction/advice from some of the more seasoned pros here...

 

Code Pen:  (I hacked this together from the throwprops demo pen

 

I'm looking to use GSAP to graphically display bookings for my business to help staff rostering/scheduling. Think of it as a bowling alley with 8 lanes, and people can book either one lane or two lanes, depending on the size of their party. I need to allocate a staff member per lane to look after the group (drinks, service, coaching etc). So... brace yourself for question onslaught!!

 

Collision Detection: I've looked at some of the responses for previous forum posts for collision detection, but haven't been able to make them work for me in my code (am a rookie). Ultimately I want my staff to be able to drag/drop bookings around, but if they drag a booking and it overlaps an existing booking, they shouldn't be able to drop that booking in the overlapping spot, and it should revert the booking to it's previous position. This fiddle basically represents the desired behaviour, is there a way to do something similar in GSAP? I've seen the hit detection stuff, am more interested in getting something that bounces back to original spot if it detects a hit, but am not smart enough to make that work!

 

Editable Divs: I have to assign staff per booking/lane. Originally I thought I'd just make the divs editable, but that proved to be difficult while also having them draggable. I looked at a couple of previous forum posts, there didn't appear to be a great solution. If that's still true, the workaround I created was to have a bunch of staff divs pre-created, and they can be dragged to wherever they need to go... Is there a more elegant solution?

 

Adding Divs on the fly: I haven't tried this yet, am assuming it would work fine, but was thinking I could have a simple textbox/form to add a staff member div on demand, rather than pre-populating them, which brings me to the next question...

 

Persistence: This will all be generated on a daily basis, or day before, or whenever we stop accepting bookings. I am assuming my staff will roster themselves up using this tool, and then I want to create some form of persistence, because when they refresh the page, I don't want it to revert back to whatever form it was in when I pre-loaded it. A bit more background on how I plan on feeding the data - I've got an API I can call from our booking platform to pull back a list of the days bookings, which I'll then order by start time and allocate automatically from left to right and top to bottom. So there'll be logic to initially define a representation of the bookings graphically assigned with lanes, but if they need to get moved (e.g. Group A is friends with Group B, we want them in the same Arena), I want some level of persistence, even if it's just on a single central machine we use at reception.

 

Not sure if my incoherent ramblings are making sense, please feel free to ask any further clarifying questions!

 

Thanks,

 

Matt

See the Pen vyJLYq by mjpaton (@mjpaton) on CodePen

Link to comment
Share on other sites

Hi Matt. Welcome to the forums (and GSAP). 

 

We really try to keep these forums focused on very specific GSAP-related questions. We just don't have the resources to provide free generalized consulting for building apps/sites. So in the future, it'd be better to post one question per thread to keep things focused. You'll dramatically increase your chances of getting an answer that way :)

 

1) Yes, you absolutely can get that behavior from Draggable. You could use an onPress callback to record the starting x/y values and then in an onRelease, do your hit detection and if it fails your condition (finds overlaps), you just TweenLite.to(this.target, 0.5, {x:startingX, y:startingY}). 

 

2) For editable divs, maybe you could sense double-clicks on the elements and then disable() the Draggable and kick the div into editing mode (maybe highlight it for the user or whatever). 

 

3) You should be able to add divs on the fly, absolutely. 

 

4) Persistence - that's beyond the scope of help we can provide here. Lots of different ways you could do that. I'm just not in a great position to advise you on it (not an expert in that topic). 

 

It might be worthwhile to find a talented developer you could hire to help you out a bit. Just a thought. ;)

 

Good luck with the project. Happy tweening (and dragging)!

  • Like 1
Link to comment
Share on other sites

Here's a good thread about creating some of those demos Carl linked to.

http://greensock.com/forums/topic/14575-how-to-create-a-sortable-list-with-draggable/

 

Collision detection using a 2d array is really simple to figure out as it's just like a spreadsheet, so you can figure out if a cell is occupied ahead of time. 

 

fY8GhfV.png

 

 

And here's a demo using GSAP's Draggable with Angular and Firebase for persistence. It's somewhat complicated, but shows what can be done by separating your business logic from your UI.

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

 

.

  • Like 2
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...