javascript - 如何使用拖放或单击 jquery 启动 .clone

Question

嗨，我有一个从 jquery 示例中得到的 fiddle 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