sortable - need more examples
page:
https://api.jqueryui.com/sortable/
Sortable need more examples, better examples.
Typical, you need move items and send all ids to server. I not found good example. Not full example. Not for methods.
Good example i found on
https://codepen.io/Sinetheta/pen/qvbCr
Code:
- HTML
<ul id="image-list1" class="sortable-list">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<ul id="image-list2" class="sortable-list">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
- JS:
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function(event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
alert(order)
alert({
id: changedList,
positions: positions
}.toSource());
}
});
I now know, how toArray works, where get 'id' attribute (what element use).
I trying find 3 days something as this
- foto2.sortStart = function(event, ui) {
ui.item.pos = {};
ui.item.pos.start = ui.item.index();
}
foto2.sortStop = function( event, ui )
{
var order;
ui.item.pos.end = ui.item.index();
if (ui.item.pos.start!=ui.item.pos.end)
{
order = $(this).sortable( "toArray", {attribute: "sort_id"});
alert(order)
// $.post("update_displayorder.php?"+order+"&a=hello"+"&b=developer",{abc:a,xyz:b},function(theResponse){
// $("#categorysavemessage").html(theResponse);
}
}
----
<script src="./js/jquery-ui-1.10.4.custom.min.js"></script>
<script>
$('.handles123').sortable({
tolerance: "pointer",
handle: '.glyphicon-move',
start: foto2.sortStart,
stop: foto2.sortStop
});
</script>