如何在jQuery中创建可拖动的克隆？

Question

我正在尝试为学校创建一个简单的网站，允许用户将不同颜色的方块拖动到一个大的div中，以创建类似于reddit上的r / place的图像。但是我无法使克隆可拖动。

jQuery：

 $(function(){
    $('.ui-widget-content').draggable({
      helper:'clone',
      revert: 'invalid'
    });
    $('#canvas').droppable({
      accept: '.ui-widget-content',
      drop: function(event, ui) {
        $(this).append($(ui.helper).clone());
      }
    });
});
<div id="canvas">


<div id="color-container">
  <div id = "red" class = "ui-widget-content"> </div>
  <div id = "blue" class = "ui-widget-content"> </div>
  <div id = "green" class = "ui-widget-content"> </div>
  <div id = "yellow" class = "ui-widget-content"> </div>
  <div id = "orange" class = "ui-widget-content"> </div>
</div>

</div> <!-- closes the "canvas" -->