Jquery可排序克隆在内联块，浮点左等行为很奇怪

Question

当我将它们放入可排序列表时，我的Jquery可克隆元素表现得很奇怪。放弃后，他们改变了立场。下面有一个例子。正如您所看到的那样，当您使用CSS显示时，元素会向下跳转：内联块，当您使用CSS显示时向上：内联表，当您使用CSS float：left时，它会变得不可用。请帮我确定我犯的错误。

＆＃13;

＆＃13;

$(function () {
        $(".square").each(function () {
                
                $(this).resizable({
                        handles: "all"
                });
        });
        $(".sortable").sortable({revert: true});
        $("#el").draggable({
           connectToSortable: ".sortable",
           helper: "clone",
           revert: "invalid"
        });
});

＆＃13;

.cxx{

  display: inline-block;
}

.square {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    
    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;
    border: 1px solid black;
    text-align: center;
    
    margin-left: 10px;
    margin-bottom: 10px;
  background: green;
}
ul{
  list-style-type: none;
}

＆＃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.9.1/jquery-ui.js"></script>
<div class="">
 <ul>
  <li id="el" class="draggable ui-state-default cxx">Drag me </li>
</ul>
<!-- HTML -->
<ul class="sortable">
<li id="n" class="square n ui-state-default cxx"></li>
<li id="e" class="square e ui-state-default cxx"></li>
<li id="s" class="square s ui-state-default cxx"></li>
<li id="w" class="square w ui-state-default cxx"></li>
<li id="ne" class="square n e ui-state-default cxx"></li>
<li id="se" class="square s e ui-state-default cxx"></li>
<li id="sw" class="square s w ui-state-default cxx"></li>
<li id="nw" class="square n w ui-state-default cxx"></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;