0

嗨，我有这个小提琴，我从 jquery 示例中得到，
它的作用基本上是将黄色框拖放到粉色分区并克隆黄色框。

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

我需要做的是通过单击它来克隆那个黄色框

谁能帮我实现这一目标？

我是前端新手，所以请放过我。

提前致谢

4

3 回答 3

2

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

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

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

演示

于 2014-02-19T04:33:08.587 回答
1

代码，这里顶部的“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"
});
});
于 2014-02-19T05:03:23.403 回答
0

您可以使用以下方法创建克隆：

$('.ui-state-highlight').on('click',function(){
var $this =$(this);
$this.after($this.clone(false));
})
于 2014-02-19T04:32:58.270 回答