how to initiate .clone using drag & drop or click jquery

Question

Hi I have this fiddle I get from jquery examples here
what it does basically is drag then drop the yellow box to pink division and clone the yellow box.

this is the html

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
 <div>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<div>

and the jquery is

    $(function () {
      $("#sortable").sortable({
        revert: true
      });

      $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
      });
      $("ul, li").disableSelection();
    });

what I need to do is clone that yellow box by clicking on it

could anyone help me achieve this?

I'm new to frontend so please spare me.

thanks in advance

Answer 1

Hope my understanding is correct, clicking on yellow box will append a clone to the sortable list and it will be sortable as well.

 $(function() {
    $( "#sortable" ).sortable({
      revert: true
    });

     $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
     }).click(function() {
        $(this).clone().appendTo($('#sortable'));
     });
    $( "ul, li" ).disableSelection();
  });

DEMO

Answer 2

Code, Here The Top " Drag me Down" is disable from drag. Only the cloned once's are draggable. And only the top yellow box is having click event to clone it.

$(function() {
$( "#sortable" ).sortable();

$('.ui-state-highlight').on('click',function(){
   var $this =$(this);
   $this.after($this.clone(false).attr('draggable','true'));
})    

$( "ul, li" ).disableSelection();

  $( "#sortable1").sortable({
      items:'[draggable=true]',
      connectWith: "#sortable"
});
});

Answer 3

You can create the clone using this :

$('.ui-state-highlight').on('click',function(){
var $this =$(this);
$this.after($this.clone(false));
})