javascript - 添加后拖放以重新排序

Question

我有两个按钮

<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

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>

Jquery

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

Answer 1

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