jquery - 尝试 "pin"可排序 jQuery <li>，意外行为

Question

故事

因此，我尝试创建一个可排序列表，其中每个项目都可以在按下按钮或其他事件时“固定”，从而导致固定项目变得不可拖动并保持其在列表中的位置。到目前为止，我已经到了向可排序元素添加一个类的阶段:

$(".test").click(function(){
  //alert($(event.target).parent("li").text());        
  $(event.target).parent("li").toggleClass("static");
});

通过将此点击函数绑定(bind)到每个 li.free 中的 a.test 元素来工作

<ul id="sortable">
<li class="free">oranges<a href="#" class="test">click</a></li>
<li class="free">apples<a href="#" class="test">click</a></li>
<li class="free">bananas<a href="#" class="test">click</a></li>
<li class="free">pineapples<a href="#" class="test">click</a></li>
<li class="free">grapes<a href="#" class="test">click</a></li>
<li class="free">pears<a href="#" class="test">click</a></li>
<li class="free">mango<a href="#" class="test">click</a></li>
</ul>​

这会切换 li 中的“.static”类，这应该允许可排序函数忽略标记为此类的项目。我使用函数中的更改处理程序来解释更改:

$("#sortable").sortable({
  items: ':not(.static)',
  start: function(){
    $('.static', this).each(function(){
        var $this = $(this);
        $this.data('pos', $this.index());
    });
  },
  change: function(){
    $sortable = $(this);
    $statics = $('.static', this).detach();
    $helper = $('<li></li>').prependTo(this);
    $statics.each(function(){
        var $this = $(this);
        var target = $this.data('pos');

        $this.insertAfter($('li', $sortable).eq(target));
    });
    $helper.remove();
  }
}).disableSelection();

问题

所以我遇到的问题是，虽然它一开始确实按预期运行，但是可以通过将事件的可排序元素移动到固定元素上方来移动固定元素，从而将固定元素推到列表中。任何想法都会受到欢迎。

jsFiddle

点击here对于 jsFiddle 示例。

编辑!!!

因此，在进一步的测试中，我发现了另一个问题...该脚本似乎根本无法在 Firefox 中运行。我还有其他工作要做，所以我会在几个小时后回来查看，感谢您提供的任何建议。

Answer 1

只需在单击事件上传递事件参数，如下所示:

$(".test").click(function(event){
        //alert($(event.target).parent("li").text());        
        $(event.target).parent("li").toggleClass("static");
    });

我想就是这样了