Sortable, auto create new list when placed in between two lists

Question

So I came to the point where I really can't find anything online on how to solve this. I'm using a jQuery Sortable function like this:

<div class="sortable">
    <div class="item" id="1"></div>
    <div class="item" id="2"></div>
</div>
<div class="sortable">
    <div class="item" id="3"></div>
    <div class="item" id="4"></div>
    <div class="item" id="5"></div>
</div>

Now, what I want to get is another "sortable"-div when the item is dragged in between of the two sortable div's. Their is a margin of 10 px inbetween them which I think has to be replaced by a div of 10px width, so I tried..

I created a div inbetween, sortable also but with the width of the 10px margin. This thing doesn't work, just because when an item is dragged in there is no div anymore in between those and it'll just be possible to do it once.

Here's a fiddle: http://jsfiddle.net/p5Z3s/5/

Can anyone point me in the right direction? I don't need code, just someone to point me out where to start and maybe how to solve this.

Example:

When an item is dragged like this:

It should result in placing it in between, something like this:

---

UPDATE 1:

I just tried to create the spacing with a new sortable div, check out the fiddle: http://jsfiddle.net/p5Z3s/6/

BUT, now the problem is, the update function is not called, which is needed for saving the positions. Also, as soon as I dragged it in between of two columns, I add the needed spacing again with:

$(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
$(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

They are created succesfully, but it is not possible anymore to drag an item inside of one.

I tried to update and refresh them by using:

$( ".sortable" ).sortable('refresh').trigger('update');

But it fails with this error:

Error: cannot call methods on sortable prior to initialization; attempted to call method 'refresh'

---

UPDATE 2:

Problem of the

$( ".sortable" ).sortable('refresh').trigger('update');

solved. Only thing that's not working right now is the:

$(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
$(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

The div's are created, but don't allow sortable items to be placed inside.

Answer 1

The key point is :

• call .sortable() on newly created divs (I imagine you figured out this much ...),
• call .sortable('refresh') on the existing ones, to make them aware of the new guys.

---

You can add empty divs between your columns, and use .droppable() :

<div class="sortable">
    <div class="item" id="1"></div>
    <div class="item" id="2"></div>
</div>
<div class="droppable">
</div>
<div class="sortable">
    <div class="item" id="3"></div>
    <div class="item" id="4"></div>
    <div class="item" id="5"></div>
</div>

$('.droppable').droppable({
    accept: ".item",
    drop: function(e, ui) {
       //insert a new sortable list in the dom
       //stick the item inside this list
       //update the setup :
       // - $(new list).sortable(...);
       //     make the existing lists aware of the new list :
       // - $(all sortables).sortable('refresh');
    }
});

See this sortable example (interaction with a droppable), and the documentation for droppable

---

You could do a similar thing using only sortables, as you did :

• in base html, or in javascript setup, insert an empty sortable div between each pair of starting div,
• every time an item is dropped, check the resultaing layout, and fix up the alternance non-empty/empty/non-empty/... ,
• don't forget to call .sortable() on newly created divs, and .sortable('refresh') on the existing ones.

---

FWIW, I find it clearer to separate the two roles existing, sortable list / empty droppable placeholder

Answer 2

jqueryUI sortable does not implement this functionality

You should have a look to empty lists option and upgrade sortable to detect cases when need to dynamically create/remove empty lists between your lists

Also you can google for swappable implementations, it might be helpful for your task.

Answer 3

Have you had a look at the portlets? It looks like it would work for you.

http://jqueryui.com/sortable/#portlets

I haven't looked too far into it but it looks like you can actually define a grid layout for your divs.

If this doesn't work then I'm most probably misunderstood your question.