如何使用拖放启动.clone拖放或单击jQuery [英] how to initiate .clone using drag & drop or click jquery

问题描述

我从jquery示例中得到了这个小提琴这里
它的基本作用是拖动然后将黄色框拖放为粉红色分区，然后克隆黄色框.

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.

这是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();
    });

我需要做的就是单击它来克隆那个黄色的盒子

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.

预先感谢

推荐答案

希望我的理解是正确的，单击黄色框会将克隆添加到可排序列表中，并且它也是可排序的.

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

这篇关于如何使用拖放启动.clone拖放或单击jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！