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

我正在尝试为学校创建一个简单的站点，允许用户将不同颜色的正方形拖动到一个大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" -->

$（函数（）{
$（'.ui小部件内容'）。可拖动({
助手：'clone'，
回复：“无效”
});
$（“#画布”）。可拖放({
接受：'.ui小部件内容'，
drop：函数（事件、用户界面）{
$（this.append（$（ui.helper.clone（））；
}
});
});