jQuery UI Draggable + Sortable

Question

让我给an example：我想通过将它们从左侧列表.draggable-colors拖到右侧div #sortable来创建彩色div 。

HTML：

<div>
  <ul class="draggable-colors" style="float:left;">
    <li id="draggable-red">Red</li>
    <li id="draggable-green">Green</li>
    <li id="draggable-blue">Blue</li>
  </ul>
  <div id="sortable" style="float:right;">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
  </div>
</div>

JS：

$("#sortable").sortable();
$("#draggable-red").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});
$("#draggable-green").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});
$("#draggable-blue").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});

所以当我开始从左侧列表中拖动一个项目时，我想要拖动彩色div <div class="red"></div>而不是<li id="draggable-red">Red</li>，这样我就可以创建彩色div了。

如何使用droppable和draggable完成此操作？

编辑1：

我需要的是这样的事情（ whatToBeDragged ）：

$("#draggable-red").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
    whatToBeDragged: "<li id='draggable-red'>Red</li>"
});

编辑2：

为可拖动处理程序添加了一个辅助函数，它修复了拖动问题但不知何故它不断创建列表项而不是彩色div。任何人吗？

$("#draggable-red").draggable({
    connectToSortable: "#sortable",
    helper: "<li id='draggable-red'>Red</li>",
    revert: "invalid" 
});