Nitish Kumar Nitish Kumar - 7 months ago 23
Javascript Question

Sortable function in jquery not executing append on stop

I've a certain div tags dynamically generated with jquery from a ul element. I've added a sortable function to these div, I position change to be dynamic.

Following is my div elements:

<div class="form-body ui-sortable" id="nitspopupmenu">
<div class="form-group ui-sortable-handle">
<div class="pagesmenu selected"><span><i class="fa fa-bars"></i> Home
</span>
</div>
</div>
<div class="form-group ui-sortable-handle">
<div class="pagesmenu selected"><span><i class="fa fa-bars"></i> About Us
</span>
</div>
</div>
....


Ul elements are:

<ul class="nav navbar-nav navbar-right" id="nitsmenu" data-nitspagelabel="1">
<li class="scroll active" data-menusort="1"><a href="#navigation">Home</a></li>
<li class="scroll" data-menusort="2"><a href="#aboutus">About Us</a></li>
....


I'm trying to get the index value of the sortable element and trying to replace with the data tag of the li elements so that we can see the change dynamically so I've done following code:

all_li = $('ul#nitsmenu > li');
$("#nitspopupmenu").sortable({
start: function(event, ui) {
startPos = ui.item.index();
},
stop: function(event, ui) {
newPos = ui.item.index();
console.log("startposition: " + startPos);
console.log("startposition: " + newPos);
all_li.sort(function(startPos, newPos) {
return $(startPos).data('menusort') - $(newPos).data('menusort');
});
$('#nitsmenu').append(all_li);
}
});


all_li
in the above code is
all_li = $('ul#nitsmenu > li');

link to JSFiddle

I'm getting index position properly. Please help

Answer

try with this code https://jsfiddle.net/Cuchu/ejhLj7ep/

With 8 elements: https://jsfiddle.net/Cuchu/810r5sgh/!

  1. add id with number same li elements data-menusort.
  2. use sortable to array in the div
  3. get id and positions, so set attr data-menusort in the li elements

with firebug inspect code and see that data-menusort change!

furute: you can use refresh sort to order elements in ul

Html:

<div class="form-body ui-sortable" id="nitspopupmenu">
  <div id ="1" class="form-group ui-sortable-handle">
   <div class="pagesmenu selected"><span><i class="fa fa-bars"></i> Home
     </span>
   </div>
  </div>
 <div id ="2" class="form-group ui-sortable-handle">
   <div class="pagesmenu selected"><span><i class="fa fa-bars"></i> About Us
    </span>
   </div>
 </div>
 </div>

 <ul class="nav navbar-nav navbar-right" id="nitsmenu" data-nitspagelabel="1">
  <li id="li-1" class="scroll active" data-menusort="1"><a href="#navigation">Home</a></li>
  <li id="li-2" class="scroll" data-menusort="2"><a href="#aboutus">About Us</a></li>
</ul>

javascript

$("#nitsmenu").sortable({});

$("#nitspopupmenu").sortable({
      stop: function (event, ui) {
        sortedIDs = $( "#nitspopupmenu" ).sortable( "toArray" );
        $.each(sortedIDs, function( index, value ) {
            liid = "li-"+value;
            pos = index + 1;
            $("#"+liid).attr("data-menusort",pos);
        });
        console.log(sortedIDs);
        reorder(sortedIDs);
    }
});

function reorder(orderedArray) {
    var el, pre, p = document.getElementById("li-"+orderedArray[0]).parentNode;
    orderedArray.forEach(function (a, b, c) {
        if (b > 0) {
            el = document.getElementById("li-"+a);
            pre = document.getElementById("li-"+c[b - 1]);
            p.insertBefore(el, pre.nextSibling);
        }
    });
}