Mootools：如何将项目添加到现有的Fx.Sort实例

Question

我遇到了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？

Answer 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(); 
    } 

}); 

这是被称为像instance.adopt(someel, <optional pos>)若pos是在列表中的数字位置。如果省略，它将追加到尾部。希望它有帮助...

Answer 2

以一看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的内部机制，因此它可能无法正常工作。