Jump to content
Search Community

Dragging a draggable element out of a scrollable div

MattE test
Moderator Tag

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

Here's a new version I made. Everything is responsive, including tiles that aren't aligned to a grid! Drag tiles to bottom panel and resize the window to see. The tiles can be sorted based on a specified property. After every drag, it logs out the tiles in every container. The grid layout animations are based on these examples.


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


See the Pen eJGrPN?editors=001 by osublake (@osublake) on CodePen


If you don't understand the ES6 syntax, click the "ViewCompiled" button in the top-left corner of the JS editor.


CodePen URL:

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

  • Like 3
Link to comment
Share on other sites

@Jonathan, thank you for your feedback. This is very useful for the application I am trying to create. I will read through the docs this weekend.


@Blake, I have tried to shape your last example into the page I am working on here

See the Pen ZQRBdP by JQadrad (@JQadrad) on CodePen

. Because the tiles are created with PHP linked to a database, I cannot predefine the tiles in the JavaScript. I thought I could make the present '.tile' in the page into the Draggable Tile, but then the scripts just creates an equal number of tiles i.s.o. applying the magic of your script to the existing tile. Those newly added tiles work fine and they are picked up when the form is submitted but the 'data-id' I defined in the HTML is not present since the tiles are not the same ones.


I have read your script several times now and I understand the biggest part of what it is doing (I think) and I can relate most things to the more simple examples that you have posted before. However, I am not sure how to apply the Tile class to the tiles that result from the database query. Can you give me a hint?


Thanks again both for the fast responses!

Link to comment
Share on other sites

Wow, that is perfect, cool. I didn't know you could do so much with this.


I have updated my

See the Pen Nxzyrp by JQadrad (@JQadrad) on CodePen

with my last problem (I promise :)). How would it work if I wanted to place tiles that are already added to a specific 'image'? By dragging the tiles down and submitting, you can see that it is added to a form to be added to the database as an image. By loading the image from the database, I want to position the existing tiles in the bottom drop-zone. I thought I could pass the position with a data-x and data-y and they are positioned properly on initialization. However, when I would reposition them within the bottom drop-zone, the offset is added again on stopDrag, while when I put them back in the top drop-zone, the offset seems to get removed and putting them again in the bottom zone, no offset is added. Am I on the right track here?


Thanks a lot again!

Link to comment
Share on other sites

Yeah, you're on the right track. The problem was the different type of positioning I used in the bottom panel (left/top percentages). I changed some stuff around so you won't have to worry about that now. It will read the data-x/data-y values and convert them. It will also initialize the tiles in a container on startup.


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

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

Hi guys, this is a very interesting thread. Thank you especially to @OSUblake


I'm currently looking for something similar like this: 

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

but I need images (my own .pngs) instead of tiles and the images should be draggable to another div-container (gridzone).


I'm trying to create a bookshelf where I can drag & drop in books (the cover of books) and arrange it like these tiles.


Any help would be very appreciated. Thank you very much in advance.

Link to comment
Share on other sites

Hi, thanks.

Any chance you could find a little time in the next days? :)

I searched the complete internet to find a solution which fits my needs but I had no luck. The closest I could find was the above mentioned example.


Or maybe you have another idea which would help me? My main problem is that I only know HTML and advanced CSS.


Thanks again.

Link to comment
Share on other sites

Hi zlep,


Welcome to the GreenSock forums!


Its possible that Blake may have some time, but he has already done a lot of work in providing these demos. Our support is very focused on the GSAP API and not so much in providing advanced demos with customizations specific to a particular project. Regardless of how clean Blake's code is, you are going to need to understand a fair amount of JavaScript and the Draggable API to do any customizations. Just pointing this out to manage expectations. 

Link to comment
Share on other sites

Hi, thanks.

Yes, I know. Actually I'm currently learning more about all those stuff, especially for my project where Blake's help would be really helpful to me. I know that I should not ask for somebody's time but it would really help me. But I can absolutely understand if Blake does not have time. I really appreciate his effort he put into this thread. So thanks anyway, I already learnt a little bit. :)

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

Hi, How to do draggable tiles with reordering (when a 3rd number tile dragged and droped to the first position it's index number changes to 1) and a tile get deleted when dragged outside container. Can you show how to do this using Typescript (not JavaScript)?


Draggable tile, Reordable Index updates based on tile position, Remove/delete when drag outside container


Link to comment
Share on other sites

Hey GGBG and welcome to the GreenSock forums!


10 minutes ago, GGBG said:

How to do draggable tiles with reordering (when a 3rd number tile dragged and droped to the first position it's index number changes to 1) and a tile get deleted when dragged outside container.

You should be able to put that logic inside of the onDragEnd callback function. For more information, check out the Draggable documentation.


If you get stuck somewhere, feel free to start a new thread in the forums about your issue. It's best to include a minimal demo of the issue in the post if you do so :) 

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