如何在 Draggable 和 Droppable 之后使用 Sortable Jquery-ui

Question

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

这是我的jsfiddle运行link

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>

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

Answer 1

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

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

Online Demo (jsFiddle)