拖放可重新排序

我有两个按钮

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

通过点击它们，我可以创建任意多的div。我通过jQuery append()方法实现了这一点。

但是我想要重新排序和安排这个div在我创建它们之后。如:https://jqueryui.com/sortable/

我在jQuery不好，我不确定这是可能的吗?如果有，请帮助我。

JS FIDDLE

<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();
});