可以使用jQueryUI在Scrolled区域中拖拽

Question

我有一个Draggable和Sortable区域，我的可拖动区域有滚动条，当我尝试将项目从draggable拖动到可排序的第一个滚动区域滚动时这不好，第二个拖动时我拖动项目我无法看到光标周围的拖动项目。有关更多信息，我尝试创建一个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;

}