JQadrad

That looks perfect. I will modify it a little bit to fit my application, but the functionality is complete. Should I leave a reference to you in the Javascript included in the webapp so I don't take the fame and glory?

Wow, that is perfect, cool. I didn't know you could do so much with this. I have updated my http://codepen.io/JQadrad/pen/Nxzyrp/ 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!

@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 http://codepen.io/JQadrad/pen/ZQRBdP. 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!

I have tried to make a JSFiddle, because it was easier to make my example: https://jsfiddle.net/jitsejan/n6hy39qe/3/ You can pick an item from the blue box and drop it in the red box below. Within both boxes items can be moved and are not aligned. When an item is dragged from the blue box outside the red box and released, it will revert to the blue box because it is not a drop zone. When an item is dragged from the red box to the blue box, it is removed from the blue box. When you click submit, it will create a form to post the positions for the items that are in the red box when submitted. The submitting part works fine (probably can be nicer, but I'm just trying ). However, I would like the horizontal scrollbar with the drop zone below using GreenSock because I notice that when I run my version without GreenSock, positions get messed up when the screen is resized. I bet it is also possible to do it better with JQuery only, but I would like to learn the GreenSock Draggable. For the blue box I would like the items to be ordered and aligned, like in the Codepen you made before (so when removing and adding them back items stay in the same order), but in the red box the positions can be random. Does this give a better idea of what I am trying to achieve?

Thank you Blake, that is already closer to what I would like to do! The threshold parameter is clear and the offset calculation too. I hope I can ask you two more questions/requirements. 1. Is it possible to re-position the tile once they are dropped in the drop-panel? So if I would like to move the dropped tile 1 from the top left corner of the drop-panel to the bottom right corner of the panel? (And after that still be able to remove it from the drop-panel to the tile-container) 2. In your previous codepen the tile would be positioned properly again (alphabetical order) when you would move it back from the drop-panel to the tile-container. In your last codepen that is broken. Is there a way to do that? Thank you again for your effort. I really appreciate it.

Sorry for the unclarity. By no overlap I mean an item cannot be on the border of the drop-panel but has to be 100% inside of it. Tiles themselves can overlap each other in the drop-panel. I have made an JQuery UI version of this problem where I can position tiles based on the position of the drop panel and the position of the dropped tile. I calculate the difference between the divs and position the tile relative to its parent (drop-panel) with the difference. I don't need alignment of the tiles. By accident I saw the tile keeping the right position inside the drop-panel because I broke the dropTile function, but that doesn't sound like the right solution

Hello, Today I am bumped into the Draggable goodness of Greensock. First of all, it is really slick and the demos are impressive. I have been reading through this specific thread, because I am trying to do a similar thing in my hobby project. I am also trying to scroll items from a scrollable div to a fixed sized canvas. I have taken one of Blake's last examples (http://codepen.io/osublake/pen/dPEbey) and I am trying to overwrite it with my own 'items'. Up till there everything seems fine and it works. However, I am trying to make something where the items should stick to the position where they are dropped. Items should be inside the drop-panel with no overlap, which means I should put the threshold to zero. I am not sure how I can set the position of the dropped tile. I have tried with TweenLite.set(tile, {x:this.x,y:this.y} but this doesn't seem to work. Should I set the position with css or is there an easy way to do this? Thank you for the feedback and apologies for opening an old thread..