jQuery sortable - 拖动的项目远远超出列表

Question

我有一个jQuery Sortable列表正在运行 - 除了一个恼人的问题。

当我拖动列表中的项目时，拖动的项目显示在列表之外。

我搜索了SO＆amp;谷歌为此做了一个修复，但我画了一个空白。

欢迎任何建议。

以下是该问题的屏幕截图：

这是我的代码：

  <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; }
      #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
      html>body #sortable li { height: 1.5em; line-height: 1.2em; }
      .ui-state-highlight { height: 1.5em; line-height: 1.2em; border: 3px dashed red; background: yellow; }
      .ui-sortable-helper { border: 2px dotted blue; background: lime; }
  </style>

  <script>
      $(function() {
        $( "#sortable" ).sortable({
          opacity: '0.9',
          placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();
      });
  </script>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>