JQuery UI, Replace and Push Down the Item Instead of Sort

I am new to JQuery, Trying to understand what can I do to extend the Sortable UI

What I want to achieve is:

I have a list

| A | B | C | . | E | F | G | H |

Where . is consider an empty spot.

If I drag A to B, instead of swapping places that looks like

| B | A | C | . | E | F | G | H |

I want it to look like (A push to B (Original A spot opens), B push to C, C push to Open Spot)

| . | A | B | C | E | F | G | H |

Another example if I push B to C it becomes

| A | . | B | C | E | F | G | H |

Also if I were to push E to F, since to the right of H doesn't have a open slot, there should be alert saying can't move.

Here is what I have done so far, you guys can reuse this jsfiddle

Topic Participants