Как переставить элементы списка и DOM с помощью MooTools?

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

, который работает на этом дом:

<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>

это должно дать вам несколько идей. то, что вы могли бы также сделать, это функция сериализации, которая может позволить вам установить любой пользовательский заказ и / или сохранить заказ после.