jquery - jQuery - Draggable and Droppable onClick + icon from draggable add to droppable container

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

---

小提琴

---