How to use Sortable after Draggable and Droppable Jquery-ui

Question

I want drag and drop to create a dynamic form online. for this purpose I am using dragging, dropping and sorting jquery-ui.js. but when I am sorting that is create a clone and when I am move by mistake its not back. please check and update me.

This is my jsfiddle running 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

You can use revert for coming back to origin like below:

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