Перемещение содержащихся элементов вверх и вниз с помощью jquery

Спасибо за любую помощь, которую вы можете предоставить! В настоящее время я использую ui-сортируемый код, позволяющий пользователям перемещать элементы вверх и вниз по порядку. Теперь я хочу дать каждому из этих элементов набор кнопок "вверх" и "вниз", которые позволяют пользователям перемещать элементы вверх и вниз с помощью щелчка. Я пробовал переработать тезисы, но, похоже, я пропустил что-то очевидное...

jQuery Sortable Move UP/DOWN Button перемещение вверх/вниз в jquery

Я думаю, что каким-то образом я не применяю jquery к правильному элементу. Мой jsfiddle находится здесь: http://jsfiddle.net/kevindp78/vexw5/2/ и код ниже.

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg">
    <a class="image">IMG1</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff1
    </div>
</div>
<div class="leg">
    <a class="image">IMG2</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff2
    </div>
</div>
<div class="leg">
    <a class="image">IMG3</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff3
    </div>

</div>

JS

$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});

$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});

Ответы

Ответ 1

В вашем коде есть несколько проблем, поэтому пропустите их в порядке.

Сначала есть $('up-button') отсутствует ., поэтому он не будет выбирать кнопки.

Далее вы используете метод parent(), который поднимается только на один уровень, используйте parents('.leg') вместо этого.

insertBefore() - это метод, который принимает цель относительно места размещения выбранного вами контента.

previous() не является функцией, он prev(), и ему не нужен параметр, поскольку он просто выбирает предыдущий элемент.

Если вы объедините все эти исправления, вы получите что-то вроде этого

$('.up-button').click(function(){
  $(this).parents('.leg').insertBefore($(this).parents('.leg').prev());
});

$('.down-button').click(function(){
  $(this).parents('.leg').insertAfter($(this).parents('.leg').next());
});

Как показано на этом отредактированном скрипке http://jsfiddle.net/vexw5/6/

Ответ 2

Вы можете попробовать заменить JS примерно так:

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});

http://jsfiddle.net/vexw5/7/

Это всего лишь основы. Нет анимации или что-то еще.