javascript - 如何在html中上下移动项目

Question

我写了代码。当你点击按钮时，功能被调用，它会将 div 提升到另一个 div 的位置，与 Down 一样，你知道怎么做吗？ http://jsfiddle.net/WmbmF/15/

<button type="submit" class="button" id="addk">Add div</button>
 <div class="body" style="float: left;">

和

var RL;
RL = 0;
$("#addk").click(function () {
       RL = RL + 1;
        RN = "Tekst" + RL;
         $("<div id='" + RN + "' class='we' > " +
          "<B>Kon" + RL +"</B>" +
           "<button type='submit' class='button'  onclick='Add(" + RN + ");' >AddNext</button>" +
           "<button type='submit' class='button'  onclick='Close(" + RN + ");' >Close</button>" +
           "<button type='submit' class='button' onclick='Up(" + RN + ");' >Up</button>" +
           "<button type='submit' class='button' onclick='Down(" + RN + ");' >Down</button><br />" +
           "<br />"  + "<input type='text'>" + "<br /><br />" + '</div>').

         appendTo(".body");
    });
function Close (){
 $("#" + body.id + "").hide();
}
function Up (we){
//??
}
function Up (we){
//?
}

Answer 1

这种方式似乎不太友好，如果有 100 个项目可以上下移动会发生什么？我认为实现这一目标的更好方法是使用可排序的列表：

http://jqueryui.com/sortable/#default

Answer 2

不知道这是否正是你想要的，但你可以试试这个：

$('button').click(function () {
    if ($(this).hasClass('up')) {
        $(this).closest('div').insertBefore($(this).closest('div').prev());
    } else {
        $(this).closest('div').insertAfter($(this).closest('div').next());
    }
});

http://jsfiddle.net/F8D7d/