使用jquery上下移动包含元素

Question

感谢您提供的任何帮助！目前，我使用 ui-sortable 代码来允许用户按顺序上下移动项目。现在，我想为这些项目中的每一个提供一组“向上”和“向下”按钮，允许用户通过单击来上下移动项目。我试过修改这些帖子，但我似乎遗漏了一些明显的东西......

jQuery Sortable Move UP/DOWN Button move up/down in 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')
});

Answer 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/所展示的那样

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

这只是基础。没有动画或任何东西。