克隆元素在Jquery中不会变得可排序

Question

当我将它放入可排序列表中时，下面的Jquery clonable元素不会变得可排序，它会一直恢复到原来的位置。我在clonable元素中使用了connectToSortable选项。请帮我确定我犯的错误。

＆＃13;

＆＃13;

$(function () {
        $(".square").each(function () {
                $(this).html("handle : " + $(this).attr("id"));
                $(this).resizable({
                        handles: $(this).attr("id")
                });
        });
        $("#sortable").sortable({revert: true});
        $(".draggable").draggable({
           connectToSortable: "#sortable",
           helper: "clone",
           revert: "invalid"
        });
});

＆＃13;

.square {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    background-color: lightblue;
}
 
.n {
    border-top: 2px solid orange;
}
 
.e {
    border-right: 2px solid orange;
}
 
.s {
    border-bottom: 2px solid orange;
}
 
.w {
    border-left: 2px solid orange;
}
.draggable{
  width: 100px;
  height: 100px;
  background: green;
}
ul{
  list-style-type: none;
}
.cxx{
  float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="cxx">
 <ul>
  <li id="e" class="draggable ui-state-default">Drag me </li>
</ul>
<!-- HTML -->
<ul id="sortable">
<li id="n" class="square n ui-state-default"></li>
<li id="e" class="square e ui-state-default"></li>
<li id="s" class="square s ui-state-default"></li>
<li id="w" class="square w ui-state-default"></li>
<li id="ne" class="square n e ui-state-default"></li>
<li id="se" class="square s e ui-state-default"></li>
<li id="sw" class="square s w ui-state-default"></li>
<li id="nw" class="square n w ui-state-default"></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;