chrisi51 Posted November 11, 2021 Share Posted November 11, 2021 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 More sharing options...
OSUblake Posted November 11, 2021 Share Posted November 11, 2021 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. 2 Link to comment Share on other sites More sharing options...
Solution chrisi51 Posted November 12, 2021 Author Solution Share Posted November 12, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now