jQuery Droppable-将CSS类添加到拖动的元素

有人能帮我解决以下问题吗

我正在使用jQuery可拖放购物车演示UI

从catalog部分拖动元素后，我想将css类添加到相关的

标记中

例如：从目录div中删除“Lolcat衬衫”后，拖动

应附加“droppedInCart”css类。。。 i、 我的html应该如下所示

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

Lolcat衬衫
奶酪汉堡衬衫
布基特衬衫

HTML

---

拖曳

棒棒糖衬衫
奶酪汉堡衬衫
布基特衬衫

滴
在此处添加您的项目

jQuery

$（函数（）{
$（“#目录li”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#cart ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
}
});
});

---

有什么建议吗？

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

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

$(function() {
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#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 );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });