Jquery 可以使OL可拖动，但不能使其成为子LIs

我需要能够：

将项目从一个div拖动到目标div

一旦它包含在目标div中，就可以在目标div的边界内拖动它

在工作中，我能够：

将项目拖动到目标DIV

在目标div中，使父列表可拖动

但不能使列表项本身可拖动

JSFiddle：

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

这是我的分数：

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

$（“#目录li”）.draggable({
附：“身体”，
助手：“克隆”
});
$（“#cart ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
}
});
$（“#车里”）。可拖动({
遏制：“文件”，
光标：“移动”
});

用#cart li瞄准列表项不起作用-什么也没发生。对于我所能想到的针对lis的任何变化都是一样的。谁能告诉我我做错了什么

编辑：

我现在可以看到，通过将项目放入购物车创建的LIs没有获得所需的class=ui draggable属性。现在，我正在寻找一种方法，以确保通过删除生成的标记符合以下要求：

    <li>List item</li>

列表项

为此：

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

列表项 以下是生成此项的行：

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

$（“
”）.text（ui.draggable.text（））.appendTo（this）；

我如何更改它以便LIs接收ui Dragable类

编辑2：

---

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

这是因为它们是动态添加的内容，您需要为每个动态添加的内容调用

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

var cartlidragopts={
遏制：“文件”，
光标：“移动”
};
$（“#cart ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this.draggable）（cartlidragopts）；
}
});
$（“#cart ol li”）.draggable（cartlidragopts）；

演示：

我需要在Drop函数中使购物车可拖动，如下所示：

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

$（“#购物车ul”）.可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
$（“#cart li”）.addClass（“ui可拖动”）；
$（“#cart ul li”）.draggable（{containment:“document”，cursor:“move”}）；
}
});

---

JSFiddle:

我们发现了不同的方法，但答案是正确的：对于动态添加的内容，需要为每个动态项调用draggable。