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

Question

有人可以帮我解决以下问题吗？

我正在使用jQuery Droppable购物车演示UI ..

从目录部分拖动元素后，我想将css类添加到相关的<li>标记。

从 目录 div中删除“ Lolcat衬衫 ”后

例如 ，拖动<li>应附加“ droppedInCart ”css类... 即我的html应如下所示。

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

  

HTML

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

  

的jQuery

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

  

FIDDLE