Question

在每个div中，有两个按钮：更高和更低。单击“更高”时，如果此div不在顶部位置，则将其移动到高于原始位置。单击“较低”时，元素将移动低于原始元素。

问题是：如何使元素相对于另一个元素上下移动？

<div>
    <div id="a1">a1<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div>
    <div id="a2">a2<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div>
    <div id="a3">a3<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div>
</div>

Answer 1

你可以尝试这样的事情：http://www.jsfiddle.net/yijiang/hwPPP/

使用insertAfter和insertBefore，我们可以上下移动按钮的父级。

$('#list').delegate('input[type="button"]', 'click', function() {
    var parent = $(this).parent();

    if(this.value === 'higher'){
        parent.insertBefore(parent.prev());
    } else {
        parent.insertAfter(parent.next());
    }

    return false;
});

Answer 2

也许你应该研究类似JqueryUI Sortable：

http://jqueryui.com/demos/sortable/

否则你可以一起使用next（）/ previous（）和insertBefore（）/ insertAfter（）jquery函数：

$("#a1").insertAfter($('#a1').next());

jQuery：移动元素位置

2 个答案: