javascript - 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 是列表中的数字位置。如果省略，它将附加到尾部。希望它有帮助...