Question

我想在上行链接上移动特定的div。与将div移动到下方相同下行链接。如截图所示，同样我想在特定div之前插入div 'IB'链接。我想在'IA'链接上的特定div之后插入div。删除“D”链接上的特定div。

alt text http://freeimagehosting.in/images/204_screen_j.jpg screenshot

现在当然会有很多替代方案可以实现上述功能，如jquery，普通的javascript等。

但我想知道哪种方法可以实现这一目标。

任何反馈都会受到高度赞赏......！

编辑：截图链接现已开始!!

Answer 1

jQuery肯定会让这类事情变得更容易。

鉴于这个简单的标记：

<div class="moveable" id="div1">
    One
    <a href='#' class="up">Move up</a>
    <a href='#' class="down">Move down</a><br/>
</div>
<div class="moveable" id="div2">
    Two
    <a href='#' class="up">Move up</a>
    <a href='#' class="down">Move down</a><br/>
</div>
<div class="moveable" id="div3">
    Three
    <a href='#' class="up">Move up</a>
    <a href='#' class="down">Move down</a><br/>
</div>

这个jQuery会向上或向下移动一个元素：

$('.moveable a.up').live('click',function(){
    var $div = $(this).parent('.moveable');
    var idx = $div.index();
    if(idx>0){          
        $div.remove();
        $('div.moveable:eq(' + (idx-1) +')').before($div);
    }
    return false;
});
$('.moveable a.down').live('click',function(){
    var $div = $(this).parent('.moveable');
    var idx = $div.index();
    if(idx<$('div.moveable').length-1){         
        $div.remove();
        $('div.moveable:eq(' + idx +')').after($div);
    }
    return false;
});

这应该足以让你继续开始插入。

如果你想要一个演示，这里是小提琴：http://jsfiddle.net/5hF98/

Answer 2

您是否看过Jquery-UI Sortable代码，可能不是您需要的代码，但这是一个选项。

使用jQuery或Javascript与Div一起玩

2 个答案: