jquery - jQuery Droppable - ドラッグした要素に CSS クラスを追加する

Question

誰かが以下のクエリで私を助けてくれませんか?

jQuery Droppable shopping Cart Demo UI を使用しています。

カタログ セクションから要素をドラッグしたら、関連する<li>タグに css クラスを追加します。

例:カタログdivから「 Lolcat Shirt 」をドロップした後、ドラッグすると「droppedInCart」css クラスを追加する必要があります。つまり、私の html は次のようになります。<li>

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

フィドル