Question

我从一段时间前发现了一篇帖子（jQuery UI Sortable dynamic fixed items），同时试图找到我当前问题的答案。不幸的是，OP的问题没有得到真正回答。请原谅我重新打开原来的问题。

我有一个带有“固定”元素的jQuery Sortable：

<ul id='sortable'>
  <li>item 1</li>
  <li>item 2</li>
  <li class='fixed'>item 3</li>
  <li>item 4</li>
</ul>

我已经在这篇文章（JQuery sortable lists and fixed/locked items）中使用DarthJDG的建议从排序中排除了固定项目，并且一切运行良好。

当我动态添加或删除可排序的项目时，我希望将固定元素的位置设为荣誉。

因此，在添加事件之后，这将是所需的列表：

<ul id='sortable'>
  <li>item 1</li>
  <li>NEW ITEM</li>
  <li class='fixed'>item 3</li>
  <li>item 2</li>
  <li>item 4</li>
</ul>

或者在从原始列表中删除第2项之后，这将是期望的结果：

<ul id='sortable'>
  <li>item 1</li>
  <li>item 4</li>
  <li class='fixed'>item 3</li>
</ul>

对此事的任何帮助将不胜感激！

编辑：这是我到目前为止的一个小提琴：http://jsfiddle.net/1cucuj91/

Answer 1

我喜欢在一个晚安睡觉后找到问题的答案。这就是我想出的：

function add(afterthisitem) {

    var newitem = $('<li/>').text('NEW ITEM');
    var sortable = $('#sortable');

    $('.fixed',sortable).each(function(){
        var el = $(this);
        el.data('pos',el.index());
    })

    $(afterthisitem).after(newitem);

    $('li',sortable).each( function(index) {
        var el = $(this);
        var pos = el.data('pos');
        if (el.hasClass('fixed') && pos!=index) {
            el.detach();
            el.insertBefore($('li', sortable).eq( pos ));
        }   
    })

}

答案隐藏在DarthJDG早期的答案中，其中包括分离和插入正确位置的技巧。上面的功能甚至可以在你有两个固定项目时使用。

如何使用固定元素向jQuery Sortable添加新元素？

1 个答案: