jQuery - 可拖动和可拖放onClick +图标从draggable添加到droppable容器

Question

我正在使用jQuery UI 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