Jump to content
GreenSock

chrisi51

Decorating xmas tree with tabbed panes of decoration elements via drag & drop + clone

Go to solution Solved by chrisi51,

Recommended Posts

Hey, i've getting into trouble because of overflow:hidden in combination with draggable.

 

i want to decorate the christmas tree and for the black bubble it is working as intended (even far from being finished). But we want to organize the decoration items in some tabbed panes (the colored bubbles) and therefore i need to use overflow:hidden and so the items can't get dragged out of the panes. 

 

The workflow is to have an original element. Cloning it to make it draggable. dragging it to the desired place and if its dropped on the tree, clone it there again (with the correct x, y values) and move the first clone back to the original position (unseen) to make it available again. 

 

Do you have any idea how to have such an organization while not loosing the drag and drop function cause of the overflow:hidden?

See the Pen oNeMape by chrisi51 (@chrisi51) on CodePen

Link to comment
Share on other sites

Hi chrisi

 

To drag stuff outside of a container with overflow, you wouldn't really drag what's inside the container. You would create a clone of that element outside of that container, position the clone over the original element, and then drag the clone. I have several demos in this thread that go over that technique, although they are using old versions of GSAP and should be probably be updated.

 

 

  • Like 2
Link to comment
Share on other sites

  • Solution

thx @OSUblake that rethinking helped a lot :)

 

See the Pen WNEgEwp by chrisi51 (@chrisi51) on CodePen



now i have a working solution and hopefully just have to make it beautiful xD

 

btw. the new concept is now:

on start cloning the 3 tab <li> and append them as a <div> with display:none and on sliding to another tab the correspondending div becomes visible while the svg themself have opacity:0 unless you start to drag one. the dragged svg gets opacity:1 then and move back to its original position after dropping. if it was dropped on the dropzone (tree rectangle) than a new clone is put to the tree parents element.

  • Like 1
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.
×