Question

我使用来自ul元素的jquery动态生成某些div标签。我已经为这些div添加了一个可排序的函数，我将更改定位为动态。

以下是我的div元素：

<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>
 ....

UI元素是：

<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>
....

我试图获取可排序元素的索引值并尝试替换li元素的数据标记，以便我们可以动态地查看更改，以便我完成以下代码：

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为all_li = $('ul#nitsmenu > li'); 链接到JSFiddle

我正确地获得了索引位置。请帮忙

Answer 1

尝试使用此代码https://jsfiddle.net/Cuchu/ejhLj7ep/

有8个元素：https://jsfiddle.net/Cuchu/810r5sgh/！

使用数字相同的li元素data-menusort添加id。
在div中使用sortable数组
获取id和位置，因此在li元素中设置attr data-menusort

使用firebug检查代码并查看data-menusort更改！

furute：您可以使用刷新排序来命令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);
        }
    });
}

jquery中的可排序函数未在stop上执行追加

1 个答案: