как начать .clone с помощью перетаскивания и падения или нажмите Jquery

Question

Привет У меня есть эта скрипку я получаю из примеров Jquery here
, что она делает в основном это перетащить затем падение желтого поля до розового разделения и клонировать желтый ящик.

это 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> 

и JQuery является

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

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

, что мне нужно сделать, это клон, желтый ящик, щелкнув по нему

может кто-нибудь помочь мне достичь этого ?

Я новичок в интерфейсе, поэтому, пожалуйста, избавь меня.

заранее спасибо

Answer 1

Надеется я правильно понимаю, нажав на желтом поле добавит клон в сортируемый список, и это будет сортируются, как Что ж.

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

Вы можете создать клон с помощью этого:

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

Answer 3

Code, здесь Top "Drag Me Down" является отключение от сопротивления. Только клонированные однажды перетаскиваются. И только верхняя желтая коробка имеет клик для клонирования.

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