jquery - 可以使 OL 可拖动但不能使子 LI

Question

我需要能够：

1. 将项目从一个 div 拖到目标 div
2. 一旦它包含在目标 div 中，使其可在目标 div 的范围内拖动

通过Droppable 购物车演示工作，我能够：

1. 将项目拖动到目标 DIV
2. 在目标 div 中，使父列表可拖动
3. 但不能使列表项本身可拖动。

JSFiddle：http: //jsfiddle.net/Fp25w/1/

我希望每个列表项都可以作为单独的实体进行拖动。

这是我的标记：

   <div id="catalog">
     <div>
       <ul>
         <li>Lolcat Shirt</li>
         <li>Cheezeburger Shirt</li>
         <li>Buckit Shirt</li>
       </ul>
     </div>
 </div>

 <div id="cart">
   <div class="ui-widget-content">
     <ol>
       <li class="placeholder">Add your items here</li>
     </ol>
   </div>
 </div>

这是我的功能：

$( "#catalog li" ).draggable({
    appendTo: "body",
    helper: "clone"
});
$( "#cart ol" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
    }
});
$( "#cart li" ).draggable({
    containment:"document",
    cursor:"move"
});

使用#cart li 定位列表项不起作用 - 没有任何反应。对于我能想到的单独针对 lis 的任何变体，都是一样的。谁能告诉我我做错了什么？

编辑：

我现在可以看到正在发生的事情是通过将物品放入购物车中创建的 LI 没有获得所需的 class=ui-draggable 属性。现在我正在寻找一种方法来确保通过删除生成的标记来自此：

    <li>List item</li>

对此：

    <li class="ui-draggable">List item</li>

这是产生这个的行：

 $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );

如何更改它以便 LI 接收 ui-draggable 类？

编辑2：

正如我刚刚通过尝试 addClass() 发现的那样，简单地添加类是行不通的。仍在寻找解决方案。

Answer 1

因为是动态添加的内容，所以需要draggable对每一个动态添加的内容进行调用

var cartlidragopts = {
    containment:"document",
    cursor:"move"
};

$( "#cart ol" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ).draggable(cartlidragopts);
    }
});
$( "#cart ol li" ).draggable(cartlidragopts);

演示：小提琴

Answer 2

我需要在 Drop 函数中使#cart Draggable，如下所示：

$( "#cart ul" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ":not(.ui-sortable-helper)",
  drop: function( event, ui ) {
    $( this ).find( ".placeholder" ).remove();
    $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
    $("#cart li").addClass("ui-draggable");
    $("#cart ul li").draggable({containment:"document", cursor:"move"});
  }
});

JSFiddle：http: //jsfiddle.net/Fp25w/4/