jquery plugin for making sortable elements
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="js/jquery.jsortable.js"></script>
<div class="example1">
<div class="box1">
Element 1
</div>
<div class="box1">
Element 2
</div>
<div class="box1">
Element 3
</div>
<div class="box1">
Element 4
</div>
</div>
.box1 {
width: 500px;
background: #505050;
text-align: left;
color: white;
border-radius: 2px;
border-bottom: 2px solid rgba(0,0,0,0.2);
padding: 10px 10px;
cursor: move;
font-size: 13px;
margin-bottom: 5px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
var $example1 = $('.example1');
$example1.jsortable({
mode: $.fn.jsortable.MODE_VERTICAL,
sortable: '.box1',
show_target_placeholder: true,
show_source_placeholder: false
});
$example1.on('jsortable_updated', function (event) {
console.log($example1.jsortable('getElements'));
});
<div class="example2">
<div class="box2">
Element 1
</div>
<div class="box2">
Element 2
</div>
<div class="box2">
Element 3
</div>
<div class="box2">
Element 4
</div>
<div class="clear"></div>
</div>
.box2 {
background: #505050;
text-align: left;
color: white;
border-radius: 2px;
border-bottom: 2px solid rgba(0,0,0,0.2);
padding: 10px 10px;
cursor: move;
font-size: 13px;
margin-bottom: 5px;
margin-right: 5px;
width: 100px;
height: 100px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
float: left;
}
$(document).ready(function () {
$('.example2').jsortable({
mode: $.fn.jsortable.MODE_HORIZONTAL,
sortable: '.box2',
show_target_placeholder: true,
show_source_placeholder: false
});
});
There is one event in jsortable.
Fires on update queue
$example1.on('jsortable_updated', function (event) {
console.log($example1.jsortable('getElements'));
});
There is one method in jsortable.
Get jQuery list sortable elements
jQuery array object of elements in order.
$example1.jsortable('getElements');
MIT