Drag & Drop between two list

[Ahoo]

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.

[OSUblake]

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.

[Ahoo]

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. 

[OSUblake]

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/

[Ahoo]

Thank you

[Yandrak]

Hi, i recive this error: "Draggable is not defined" I have this cdn: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

 

 

Which cdn i need?? thanks so much

[ZachSaucier]

Hey @Yandrak and welcome to the GreenSock forums. If you want to use a plugin like Draggable then you need to load it in addition to the GSAP core. See the installation docs for more info.