Question

我正在尝试重新排列列表中的项目：

<ul>
<li>1 <button><li>
<li>2 <button><li>
<li>3 <button><li>
<li>4 <button><li>
</ul>

使用MooTools：

document.getElements('button').addEvent('click', function() {
    var toSort = new Fx.Sort(this.getParent(),this.getParent().getNext());
    toSort.swap();
    toSort = toSort.rearrangeDOM();
}

当我点击第一个列表元素y的按钮时：

<ul>
<li>2 <button><li>
<li>1 <button><li>
<li>3 <button><li>
<li>4 <button><li>
</ul>

但我明白了：

<ul>
<li>2 <button><li>
<li>3 <button><li>
<li>4 <button><li>
<li>1 <button><li>
</ul>

我做错了什么？

提前致谢

Answer 1

取决于您想要达到的效果。 “按钮”的目的是什么？提升？移到顶部？移到最后？

这是一个Fx.Sort使用的例子，它发送一行（如果不是第一次）

http://jsfiddle.net/dimitar/ZQhgF/

var sort = new Fx.Sort($$("ul li"), {
    transition: Fx.Transitions.linear.easeInOut,
    link: "chain",
    duration: 500,
    mode: "vertical",
    onComplete: function() {
        this.rearrangeDOM();
    }
});

document.getElements('button').addEvent('click', function(e) {
    e.stop();
    var el = this.getParent(), prev = el.getPrevious();
    if (!prev)
        return;
    sort.swap(el, prev);
});

适用于这个dom：

<ul id="sorter">
    <li>1 <button>up</button></li>
    <li>2 <button>up</button></li>
    <li>3 <button>up</button></li>
    <li>4 <button>up</button></li>
</ul>

它应该给你一些想法。你还可以做的是一个序列化功能，它可以让你设置你想要的任何自定义订单和/或之后保存订单。

如何使用MooTools重新排列列表和DOM的项目？

1 个答案: