Question

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

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/

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

使用jquery上下移动包含元素

2 个答案: