jquery - 使用 jQueryUI 在滚动区域中拖动

Question

我有一个Draggable和Sortable区域，我的可拖动区域有滚动条，当我尝试将项目从可拖动拖动到可排序时，第一个滚动区域滚动，这不好，第二个当拖动我拖动项目时，我看不到光标周围的拖动项目。有关更多信息，我尝试创建 aa jsbin，所以我的问题是：

1. 从可拖动区域拖动时不应滚动
2. 查看光标周围的拖动项目

Answer 1

您应该为所有元素提供宽度和高度以防止出现奇怪的行为。没有它，Sortable 将无法正常工作。要禁用滚动条，请使用overflow:hidden。使用list-style-type: none禁用项目符号点也很好，并为可拖动对象提供背景颜色以更好地查看它们。使用 as container 而不是 encapsulating 。这是通常的方式……也是预防问题的方式。

您将 draggable()、dropable() 和 sortable() 混合在一起使用，但对于您来说，您真的只需要 sortable()。

新代码在这里 jsbin

HTML

 <ul class="draggableContainer connectedSortable">
      <li>Item 1</li>
      <li>Item 2</li>
       <li>Item 3</li>
      <li>Item 4</li>
       <li>Item 5</li>
      <li>Item 6</li>
    </ul>

    <ul class="droppableContainer connectedSortable">
      <li>Test</li>
    </ul>

JS

$('.draggableContainer, .droppableContainer').sortable({
  connectWith:'.connectedSortable',
  cursor: "move", cursorAt: { top: 10, left: 60 },
  zIndex:999
}).disableSelection();

CSS

.droppableContainer{
  z-index:0;
}
.droppable, draggable{
  z-index:1000;
}

ul {
    padding:5px;
    overflow:hidden;
}
ul li {
  list-style-type: none;
      width:100px;
      height:20px;
      margin-bottom:2px;
      background-color:silver
}

.draggableContainer, .droppableContainer{
  background-color:gray;
  width:120px;
  height:200px;
  overflow-x:hidden;
  margin:0;
  display:inline-block;
}
.droppableContainer{
  background-color:violet;

}