如何使用拖动启动.clone;删除或单击jquery

时间:2014-02-19 04:09:09

标签: javascript jquery jquery-ui-draggable jquery-draggable

嗨,我从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();
    });

我需要做的就是通过点击它来克隆黄色框

任何人都可以帮我实现这个目标吗?

我是新来的,所以请饶我。

提前致谢

3 个答案:

答案 0 :(得分:2)

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

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

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

<强> DEMO

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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