jQuery - перетаскиваемый и перетаскиваемый значок onClick + из перетаскиваемого объекта в контейнер для перетаскивания

Question

Я использую JQuery UI Droppable...

Как добавить элемент при нажатии на значок "+" из списка "Draggable" в список "Droppable" так же, как перетаскивание...

HTML

<div id="products">
  <h2>Drag</h2>
  <div id="catalog">
      <ul>
        <li class="one">Item 1 <span class="add">+</span></li>
        <li class="two">Item 2 <span class="add">+</span></li>
        <li class="three">Item 3 <span class="add">+</span></li>
        <li class="four">Item 4 <span class="add">+</span></li>
        <li class="five">Item 5 <span class="add">+</span></li>
        <li class="six">Item 6 <span class="add">+</span></li>
      </ul>
  </div>
</div>

<div id="cart">
  <h2>Drop Here...</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();
            $(ui.draggable).clone().appendTo(this);
        }
    }).sortable({
        items:"li:not(.placeholder)",
        sort:function(){
            $(this).removeClass("ui-state-default");
        }
    });
});

---

FIDDLE

---