我遇到了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
?
答案 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 :(得分: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是列表中的数字位置。如果省略,它将附加到尾部。希望它有所帮助...