CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
not_a_generic_user
not_a_generic_user

Reputation: 2178

Jquery ui sortable: drag list items between two columns of a group and between different groups

Here's the setup:

<div id='sortable_groups'>
<div id='group1'>
    <div id='g1_col1' class='sort_column'>
    </div>
    <div id='g1_col2' class='sort_column'>
    </div>
</div>
<div id='group2'>
    <div id='g2_col1' class='sort_column'>
    </div>
    <div id='g2_col2' class='sort_column'>
    </div>
</div>

So I already have it working where the groups themselves are draggable back and forth and any items I print into the column when my page starts can sort within column1 or column2 of the same group. Here's the jquery for that:

$("#sortable_groups").sortable({
}).disableSelection();          
$("#g1_col1,#g1_col2,#g2_col1,#g2_col2").sortable({
connectWith: ".sort_column",
tolerance: "pointer",
update: function (){
},   
}).disableSelection();

So I want to be able to drag an item from any column to any other column. However, when I drag from g2_col1 for example, it will only drop into g2_col1 or g2_col2, not anything in group1. I've already tried making the min-height of the group1 columns large enough that there's a droppable area. I've also tried binding a function to the "start" property of the sortable so that when something is being dragged, it makes a dummy div in the target column for the one I'm dragging to drop onto.

But nothing seems to work. The sortable items just want to stay within their group no matter what I try. I would especially like it if there were a way to keep the items distributed evenly between the two columns though. For instance, if there were a way to lock the sortable so that items could only be swapped and not make space for any new ones.

That way I could make dummy positions on start and only allow the dragged items to fall onto the existing items or newly created dummies.

So perfect situation aside, I'd settle for being able to drag between groups :(

Upvotes: 0

Views: 2121

Answers (1)

not_a_generic_user
not_a_generic_user

Reputation: 2178

Well, tinkering makes magic I guess. I learned that my code works AS IS, but I had an error in my JS script that made my column sortable string only have g2_col1 and g2_col2 in it and not the first columns. Go figure that it won't work on columns that aren't in the string, huh?

For anyone else that has a similar problem, remember that there has to be height on your empty column areas or the drop won't have anything to connect with. Also changing to tolerance: pointer helps. See the docs for instructions on how to attach multiple sortable columns and rows to each other here: .... uh... nevermind. I can't find the doc that showed me the above syntax where you connect multiple ids as sortables together, but the above is the correct syntax.

Upvotes: 4

Related Questions