Draggable / sortable with empty placeholders

[invalidusername]

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?

See the Pen dPZLEp by GreenSock (@GreenSock) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Blake, AKA King Draggable, who developed the example you are referencing has since devised better ways to drag and sort.

 

Please read his post here: https://greensock.com/forums/topic/14575-how-to-create-a-sortable-list-with-draggable/

It's got great info and demos.

 

 

Some other helpful examples:

drag from one container to another: http://codepen.io/osublake/pen/dPEbey

clean sortable grid: http://codepen.io/osublake/pen/NrRJwm

 

FWIW what you are trying to do is fairly advanced and its not the type of thing we all can just build for you. I'm confident the resources above will put you on the right path.  If there is a single part you are having trouble with it is best to create a very bare-bones demo that isolates just the functionality you need help with. 

[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

[Carl]

Glad you got it working. Thanks for sharing your thoughts on Draggable and that it feels better than jQuery's. Great to hear. There are a lot of features packed in which you may not need for every project but will certainly get you out of a jam some day. There's so much it can do with hit-detection, direction sensing, dynamic / live snap values, auto scrolling, throwing, etc it can be a bit daunting if you try to wrap your head around all of it at once. It's great to have folks like Blake pushing the limits so people can learn all that it can do.