0

观察以下示例：

<html>
  <head>
    <script src="jquery-1.6.2.js"></script>
    <script src="jquery-ui-1.10.0.js"></script>
    <script src="fixedsortable.js"></script>
  </head>
  <body>
    <ul class="list-1">
      <li class="fixed">Fruits</li><!-- responds as expected (it lives at the top level)-->
      <li>
        <ul class="list-2">
          <li class="fixed">-Tomatoes are fruits too!</li><!-- not as expected, should act like a handle to sort the entire list of tomatoes within the list of fruits (as if it were a child element of a sortable item) -->
          <li>--cherry tomatoes</li>
          <li>--plum tomatoes</li>
          <li>--roma tomatoes</li>
        </ul>
      </li>
      <li>-oranges</li>
      <li>-cherries</li>
      <li>-bananas</li>
    </ul>
    <script>
      $('[class*="list-"]').fixedsortable({
        fixed: ".fixed"
      });
    </script>
  </body>
</html>

可以在这里找到fixedsortable.js 扩展： 问题#4299241

我发现了以下关于 fixedsortable 扩展的信息：

...

},

_mouseStart: function( event ) { 

  for(var i=0;i<this.options.fixed.length;++i) {
    var num = this.options.fixed[i];
    var elem = this.items[num];

    if(event.target == elem.item.get(0)) return false;
  }

  return $.ui.sortable.prototype._mouseStart.apply(this,arguments);
},

...

我尝试通过 DOM 向上event.target.parentNode查找任何其他可排序对象，并将找到的任何内容作为 jquery 代替原型this传递arguments给原型，否则在到达文档时返回 false，但不清楚应该如何完成或是否这样做是正确的做法。

任何帮助将不胜感激！

4

1 回答 1

0

好吧，自从提出这个问题以来已经过了几个深夜，所以我认为后续行动是有序的......

在研究了一下 jquery 之后，我发现编写自己的插件很容易。虽然 jquery-ui 是一个很好的 api，但我发现尝试自定义它的过程有点麻烦。我能够使用我自己的一些插件和更少的开销来完成我想要的特定行为。此外，我不必尝试维护我一开始就没有编写的代码。:)

如果有人感兴趣，fixedsortable.js 提供的解决方案通过return false;扩展的 _mousestart 包装器中断事件传播，其中测试了目标的“固定”状态。一个合适的解决方案包括将事件绑定限制在那些不固定的元素上，而不是绑定到每个可排序的目标，然后尝试限制固定目标上的事件传播。这是我在插件中使用的方法。

于 2013-03-15T20:42:44.943 回答