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實例，您可以根據需要修改一些屬性：

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的內部機制，所以它可能無法正常工作。

Answer 2

對 - 讓它與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是列表中的數字位置。 如果省略，它將附加到尾部。 希望能幫助到你...