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 拡張機能は次の場所にあります: question #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);
},

...

event.target.parentNode他のソート可能オブジェクトを見つけるために DOMを調べて、見つかったものを jquery の代わりthisにargumentsプロトタイプに渡してみました。が正しいアプローチです。

どんな助けでも大歓迎です！

4

1 に答える 1

0

質問がされてから数夜遅く経ったので、フォローアップが必要だと思います...

jquery を少し勉強した後、自分のプラグインを簡単に作成できることがわかりました。jquery-ui はドロップ アンド ゴーの優れた API ですが、それをカスタマイズしようとするプロセスが少し面倒であることがわかりました。いくつかの独自のプラグインを使用して、必要な特定の動作を達成することができ、オーバーヘッドがはるかに少なくなりました。また、最初から書いていないコードを維持しようとする必要もありません。:)

return false;興味のある方のために説明すると、fixedsortable.js によって提供されるソリューションは、ターゲットの「修正済み」ステータスがテストされる拡張 _mousestart ラッパーからイベントの伝播を中断します。適切な解決策には、ソート可能なすべてのターゲットにバインドしてから、固定されたターゲットでのイベントの伝播を制限しようとするのではなく、イベントのバインドを固定されていない要素のみに制限することが含まれます。これは、プラグインで使用したアプローチです。

于 2013-03-15T20:42:44.943 に答える