invalidusername

Thanks for the reply @Carl. That second example (dragging clones) is perfect, that'll get me sorted. I actually originally developed the interface for this project using jQuery UI which I've used a thousand times before, and am used to its draggable / droppable structure, but jQuery UI never feels great. GreenSock's draggable definitely seems far more robust, but quite a bit to wrap your head around at first and I was struggling to find examples

I'm trying to create a draggable/sortable interface based on the Sortable Grid Using GreenSock Draggable example codpen. All is working fine, but I am trying to create 4 empty "placeholders" at the top of the sortable grid, something like: The placeholders act like empty grid spaces, they are not draggable, but rather draggable elements can be dropped into them. When the grid is recalculated the placeholders do not change position. Draggable items can also be dragged out of the placeholders and back into the grid. I've somewhat accomplished it by adding the relevant HTML elements like so: <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> <div id="list"></div>And then modifying the onRelease function like so: if ( this.hitTest( $(".placeholder"), 0) ){ // draggable has been dropped in a placeholder } else { // this is the normal part of the onrelease function from the demo // Move tile back to last position if released out of bounds this.hitTest($list, 0) ? layoutInvalidated() : changePosition(tile.index, tile.lastIndex); ... This works in that the dragged item remains in the placeholder element and can be dragged back out, but I'm struggling to find a way to get the dragged element to snap to the placeholder. Any suggestions?