Jump to content
GreenSock

Ahoo

Drag & Drop between two list

Go to solution Solved by OSUblake,

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

The Codepen URL is from another topic in the forum which setup drag&drop in one list. What I want to do is drag&drop items between two lists. So you can drag an item from either lists and be able to drop it to the other list. 

 

Any hint would be appreciated.

See the Pen iFDow by jamiejefferson (@jamiejefferson) on CodePen

Link to comment
Share on other sites

  • Solution

How about this...

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

 

There are several different versions of that discussed in this thread.

http://greensock.com/forums/topic/11519-dragging-a-draggable-element-out-of-a-scrollable-div/

 

And here's another example

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

 

It's a little rough around the edges, but it's based off of this demo.

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

  • Like 7
Link to comment
Share on other sites

Thank you so much. Not only the problem is solved but I learned so much. 

 

One last question since I am not really good on CSS. How can I have the container and drop zone vertically instead of horizontally in this example of yours :

 

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

 

What I mean is that the letters align under each other vertically and not side by side. 

Link to comment
Share on other sites

I used flexbox for that demo, which is still a pretty new concept to CSS. For flexbox you can define the layout as a row or column using...

// CSS for row
flex-direction: row;

// or column
flex-direction: column;
 

Here's a little info about flex-direction you might want to check out.

https://css-tricks.com/almanac/properties/f/flex-direction/

Link to comment
Share on other sites

  • 4 years later...

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