Javascript 拖放以重新排序<；部门>；在附加它们之后

我有两个按钮

<a href="#" class="add">+ Add 1</a>
<a href="#" class="add2">+ Add 2</a>

通过单击它们，我可以创建任意数量的div。我通过jQuery append（）方法实现了这一点

但是我想在我创建了这些div之后对它们重新排序。 比如：

我不擅长jQuery，我不确定这是否可能实现？如果是，将不胜感激

HTML

<div class="holder">

    <div class="bar">
        <p style="float:left"> Hello world</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>
    <div class="bar2">
        <p style="float:left"> Hello world 2</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>


</div>


<a href="#" class="add">+ Add 1</a>
<a href="#" class="add2">+ Add 2</a>

$('.add').click(function() {
 $(".holder").prepend('<div class="bar"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});

$('.add2').click(function() {
 $(".holder").prepend('<div class="bar2"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});


$('.delete').click(function() {
 $(this).parent('.bar').remove();
});

你好，世界
你好，世界2

Jquery

<div class="holder">

    <div class="bar">
        <p style="float:left"> Hello world</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>
    <div class="bar2">
        <p style="float:left"> Hello world 2</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>


</div>


<a href="#" class="add">+ Add 1</a>
<a href="#" class="add2">+ Add 2</a>

$('.add').click(function() {
 $(".holder").prepend('<div class="bar"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});

$('.add2').click(function() {
 $(".holder").prepend('<div class="bar2"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});


$('.delete').click(function() {
 $(this).parent('.bar').remove();
});

$（'.add'）。单击（函数（）{
$（“.holder”）.prepend（“
Hello world
”）；
});
$（'.add2'）。单击（函数（）{
$（“.holder”）.prepend（“
Hello world
”）；
});
$（'.delete'）。单击（函数（）{
$（this.parent（'.bar'）.remove（）；
});

添加了jquery ui:jsfiddle.net/jnLfh/17

如何重新订购？顺序是什么？Ii可以是任何顺序我可以拖动任何红色或灰色条并重新定位它们。例如，我刚刚添加了两种不同的颜色。在我的项目中有许多随机div。我需要有重新安排的能力。既然你有文档，为什么你就不能照着做呢？根据它你试过什么？这里不是人们为你做事的地方，而是通过解决你在尝试时遇到的问题来帮助你做事的地方……事实上不是这样的。我需要有拖放的能力，比如：好吧，如果你喜欢，为什么不加载jquery ui？在这里，我添加了jquery-ui.js并使其可排序，如示例所示。加上增加的计数器，它们有助于了解发生了什么。谢谢，现在我得到了结果！如果我附加jQueryUISort，我只是感到困惑，这会起作用吗。现在我看到这是伟大的工作！