Jump to content
Search Community

How would you go about building this?

nielsrobin 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've attached a drawing. I'm trying to find out how and if i should use GSAP/Draggable to build this.

 

post-41124-0-58007100-1452176604_thumb.png

 

The idea is that the bottom of the drawing is a search area where you can find items, then you can drag the items you want up to the top area (dragging the same item multiple times is possible, so i'm thinking i would have to create a clone and drag that instead of the actual item).

 

Once dragged to the top "configurator" the items can be rearranged in any order horizontally.

 

This posses some questions i was having a hard time figuring out reading the forums and documentation.

 

COPIES: when dragging an item, can i instead create a clone of the item and drag that instead?

 

BOUNDRIES: Moving from a boundryless area (search/item list) to the boundry box of the configurator. Normally I'd create a DIV for the configurator and have the items put into it in it and a separate DIV with all the items in the item list. But then how do i move an item from one "Draggable type" to another one?

 

Building each of these by themselves it's much of a problem. I could use a Draggable instance to only allow dragging on the x-axis in the configurator and create another Draggable instance for the items in the list below, but i have no idea how to copy my object from the list and then move it to the configurator passing onto another scope/area.

 

Maybe I'm attacking this incorrectly, hopefully one of you can help point me in the right direction.

Link to comment
Share on other sites

Thanks Diaco,

 

That helps explain a lot, I'll dig into the examples and see if I can wrap my head around them. One note though, the examples linked still assume that I want to drag the element i drag on.

 

However if you take the letter example here

See the Pen XJQKVX by osublake (@osublake) on CodePen

 

That I want is to drag a copy of the H to the line below (or have another H appear magically after I've dropped the current one in the bottom). Thoughts on how that could be achieved?

Link to comment
Share on other sites

I don't think you are going to get a better example than what Blake has provided, but if you want to create multiple clones of the same element, check out this demo that rodrigo made: 

See the Pen mJqwZq by rhernando (@rhernando) on CodePen

 

Yeah thanks, Blake's example looks great, I just needed to dig a bit deeper to realize what it was doing.

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