使用 jQuery UI 在滚动区域中可拖动答案

【问题标题】：Draggable in Scrolled area with jQueryUI使用 jQuery UI 在滚动区域中可拖动
【发布时间】：2013-10-17 08:57:57
【问题描述】：

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

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

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案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>

$('.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;

}

【讨论】：

@MBehtemam 对您有用吗？