如何使用拖放啓動.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，這裏的頂級 「我拖」 是從拖禁用。只有克隆的一次是可拖動的。並且只有頂部的黃色框是有點擊事件來克隆它。

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