2012-01-18 10 views
0

Mootools Fx.Sortに問題があります。Mootools:既存のFx.Sortインスタンスにアイテムを追加する方法

<ul id="list"> 
    <li>One</li> 
    <li>Two</li> 
</ul> 

Javascriptを:

mySort = new Fx.Sort($$('ul#list>li')); 

私は、リストに複数の要素を追加することができます。

$('list').adopt(new Element('li', { text: 'Three' })); 

しかし、実行時作成したリストの要素は、明らかに、Fx.Sortによって考慮されていませんインスタンスであり、他のインスタンスとソートすることはできません。

既存のFx.Sortに追加する方法はありますか?または、唯一のことは、実行時に要素を追加するたびにmySortを新しいインスタンスに置き換えることですか?

答えて

1

右 - それはFx.Sortの実装と互換性を維持し、それがなど必要としてソートそれを維持するためにトリッキーだが、ここにクリックされた項目のいずれかがトップになり、その後拡大することにより、作業例です:

あなたに特定のhttp://jsfiddle.net/dimitar/FcN32/

Fx.Sort.implement({ 

    adopt: function(el, pos) { 
     if (!this.element) 
      this.element = this.elements[0] && this.elements[0].getParent(); 

     var len = this.currentOrder.length; 
     pos = (pos !== null && typeof pos === 'number') 
      ? this.currentOrder.contains(pos) ? pos : len 
      : len; 


     this.elements.include(el); 
     if (pos === len) { 
      // don't care, attach to bottom. 
      el.inject(this.element); 
      this.currentOrder.push(this.elements.indexOf(el)); 
     } 
     else { 
      // we are injecting at a particular place in the order 
      el.inject(this.elements[pos], "before"); 
      var newOrder = this.currentOrder.slice(0, pos) || []; 
      newOrder.push(this.elements.indexOf(el)); 
      this.currentOrder = newOrder.combine(this.currentOrder.slice(pos)); 
     } 
     if (el.getStyle('position') == 'static') el.setStyle('position', 'relative');        
     this.rearrangeDOM(); 
    } 

}); 

これはposは、リスト内の数値の位置であるinstance.adopt(someel, <optional pos>)のように呼び出されています。省略された場合は、末尾に追加されます。それが助けてくれることを願って...

+0

ありがとうございます。私のニーズにはうまくいくようです。 –

1

Fx.Sortインスタンスを見てみると、あなたはあなたのニーズに応じて変更することができますいくつかの属性があります。

console.log(new Fx.Sort($$('ul#list>li')); 

は(テストしていません)これは私がそれを行うだろうかです:

var mySort = new Fx.Sort($$('ul#list>li')); 
var newElement = new Element('li', { text: 'Three' }); 
$('list').adopt(newElement); 
mySort.elements.include(newElement); 
mySort.subjects.include(newElement); 

// Order of elements 
var orderSize = mySort.currentOrder.length; 
mySort.currentOrder[orderSize] = orderSize; 

しかし、Mootools More FX.Sortの内部メカニズムが変更されているため、機能しない可能性があります。

+1

を参照してください。したがって、他の解決策が見つからない場合は、提案に従って 'Fx.Sort'(' Class.implement'を使用)に 'addElement'メソッドを直接実装しようとします。ありがとうございました。 –

+0

私はそれを行うためのきれいな方法だと思います。しかし、モジュール性に関しては悪い考えです。mootoolsの開発者が内部システムを大幅に変更すると、実装はもう機能しなくなります。この場合、私はドキュメントに自分自身を制限することを好むので、要素を追加するたびにFx.Sortを再インスタンス化します。 –

+0

_ "もしmootools devsが内部システムを大幅に変更すると、あなたの実装はもう動作しません" - それはまさに**何かを行うには汚れた**方法の定義です;) – MattiSG

関連する問題