如何在可拖放Jquery ui之后使用可排序

我想通过拖放在线创建一个动态表单。为此，我使用了拖放和排序jquery-ui.js。但当我排序时，这是创建克隆，当我错误地移动时，它不会返回。 请检查并更新我

这是我的跑步链接

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Itms</h4>
            <div id="myAccordion">
                <h3>Books</h3>
                <ul class="source">
                    <li>Book 1</li>
                    <li>Book 2</li>
                    <li>Book 3</li>
                    <li>Book 4</li>
                </ul>
                <h3>Toys</h3>
                <ul class="source">
                    <li>Toy 1</li>
                    <li>Toy 2</li>
                    <li>Toy 3</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-6">
            <h4>Shopping Cart</h4>
            <div id="cart" class="panel panel-primary">
                <div id="cart" class="panel-body">
                    <ol id=items></ol>
                </div>
            </div>
        </div>
    </div>
</div>

Itms
书

第一册
第二册
第三册
第四册

玩具

玩具1
玩具2
玩具3

购物车

JS

$(document).ready(function(){
    $("#myAccordion").accordion();
    $(".source li").draggable({
        helper:"clone",
        zIndex: 9999
        });
    $("#cart").droppable({drop:function(event, ui){
        $("#items").append(
            $("<li></li>").text(ui.draggable.text()
        ));
    }});
    $( "#items" ).sortable({
        revert: true,
        zIndex: 9999
    });
    $( "#items" ).disableSelection();
});

$（文档）.ready（函数（）{
$（“我的手风琴”）.accordion（）；
$（“.source li”）.draggable({
助手：“克隆”，
zIndex:9999
});
$（“#购物车”）.dropable（{drop:function（事件，用户界面）{
$（“#项”）。追加(
$（“
”）text（ui.draggable.text（）
));
}});
$（“#项”）。可排序({
回复：对，
zIndex:9999
});
$（“#项”）.disableSelection（）；
});

您可以使用返回原点，如下所示：

$(document).ready(function() {
  $("#myAccordion").accordion();
  $(".source li").draggable({
    helper: "clone",
    zIndex: 9999,
    revert: 'invalid' // Back to orgin
  });
  $("#cart").droppable({
    helper: 'clone',
    revert: 'invalid', // Back to orgin
    accept: '.source li',
    drop: function(event, ui) {
      $("#items").append(
        $("<li></li>").text(ui.draggable.text()));
    }
  });
  $("#items").sortable({
    revert: true,
    zIndex: 9999
  });
  $("#items").disableSelection();
}); 

$（文档）.ready（函数（）{
$（“我的手风琴”）.accordion（）；
$（“.source li”）.draggable({
助手：“克隆”，
zIndex:9999，
revert:'无效'//返回到orgin
});
$（“#购物车”）。可拖放({
助手：“克隆”，
revert:'无效'，//返回到orgin
接受：'.source li'，
drop：函数（事件、用户界面）{
$（“#项”）。追加(
$（“
”）文本（ui.draggable.text（））；
}
});
$（“#项”）。可排序({
回复：对，
zIndex:9999
});
$（“#项”）.disableSelection（）；
});