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

在追加<div>之后拖放以重新排序<div>

1 个答案: