JQuery Sort by row Bootstrap
I have some bootstrap HTML, there are two lines.
There are two divs in the top row in different columns, they sort and work without issue.
The problem is I cannot get the second row to sort with the first row. In other words, I need a way to make the divs inside rows 1 and 2 sorted among themselves. (Drag div from line 1 to line 2)
You can see that 1 and 2 are sorted, but not with others (3 and 4) in this jsfiddle: http://jsfiddle.net/CsFpn/3/
<div class="row">
<div id="sortable">
<div class="col-md-6">
<div class="c1" id="c1">1</div>
</div>
<div class="col-md-6">
<div class="c2" id="c2">2</div>
</div>
</div>
</div>
<div class="row">
<div id="sortable">
<div class="col-md-6">
<div class="c3" id="c3">3</div>
</div>
<div class="col-md-6">
<div class="c4" id="c4">4</div>
</div>
</div>
</div>
source to share
You have to call .sortable()
on a container element (which is not in your example) and set the items option .col-md-6
.
Instead of using the change event to regroup items between lines if it occurs during sorting change
.
Using your markup, this would be:
(I changed two id="sortable"
to class="sortable"
)
<script>
$(function() {
$('.container').sortable({
items: '.col-md-6',
change: function(e, ui) {
// Rearrange your columns between rows here
}
});
});
</script>
<div class="container">
<div class="row">
<div class="sortable">
<div class="col-md-6">
<div class="c1" id="c1">1</div>
</div>
<div class="col-md-6">
<div class="c2" id="c2">2</div>
</div>
</div>
</div>
<div class="row">
<div class="sortable">
<div class="col-md-6">
<div class="c3" id="c3">3</div>
</div>
<div class="col-md-6">
<div class="c4" id="c4">4</div>
</div>
</div>
</div>
</div>
source to share
There are a couple of problems with your code. First, HTML IDs must be unique. Second, you need to string the sorts together, as shown in this jQuery sort example .
I searched your jsfiddle to demonstrate how to get it working: http://jsfiddle.net/puh2r3vn/
HTML:
<div class="row">
<div id="sortable1" class="connectedSortable">
<div class="col-md-6">
<div class="c1" id="c1">1</div>
</div>
<div class="col-md-6">
<div class="c2" id="c2">2</div>
</div>
</div>
</div>
<div class="row">
<div id="sortable2" class="connectedSortable">
<div class="col-md-6">
<div class="c3" id="c3">3</div>
</div>
<div class="col-md-6">
<div class="c4" id="c4">4</div>
</div>
</div>
</div>
JavaScript:
$(function () {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
source to share