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

【问题标题】：How to use Sortable after Draggable and Droppable Jquery-ui如何在 Draggable 和 Droppable Jquery-ui 之后使用 Sortable
【发布时间】：2018-03-16 11:30:07
【问题描述】：

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

这是我的jsfiddle运行链接

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>

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

【问题讨论】：

标签： jquery jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

【解决方案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)

【讨论】：