jquery - 使用 jQuery UI 在滚动区域中可拖动

Question

我有一个 Draggable 和 Sortable 区域，我的 Draggable 区域有滚动条，当我尝试在滚动的第一个滚动区域将元素从 draggable 拖动到 sortable 时，这不是好，第二个当拖动我拖动元素时，我看不到光标周围的拖动元素。有关更多信息，我尝试创建一个 jsbin所以我的问题是:

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

Answer 1

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

您混合使用了 draggable()、dropable() 和 sortable()，但对于您的情况，您实际上只需要 sortable()。

The new code is here 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;

}