我的 jQuery UI 代码无法正常工作

Question

我想创建一个简单的页面，通过输入任务来记录一周内的任务，按回车在当天创建一个列表项。用户可以在列之间拖动任务，也可以通过拖动到id为#trash的底部框将其删除

当我试图以丑陋的方式拖动添加的 li 项目时，它只是自动滚动容器。我添加了这段代码：

$("#todoList ul li:not('.listTitle, .addItem')").draggable({ 
  scroll: false
});

试图让它不再滚动，但它不起作用

然后我发现如果我在css中将overflow: hidden添加到#todoList，添加的列表文件将不再使#todoList滚动但它看起来不正确，因为该项目被隐藏了。 .emptySpace 将位于 #todoList 框的底部。

你会在这里找到我的代码：https://jsfiddle.net/minhha0317/6ph8rgjy/

请告诉我如何解决这个问题。我正在使用 jquery 3.2.1 和 jquery ui 1.12.1。 jsfiddle 的行为与我在 PC 上的实际代码相同

Answer 1

只需从.container 中删除overflow:auto。

.container {
  position: relative;
  width: 800px;
  margin: 40px auto;
  background: white;
  padding: 20px;
  box-sizing: border-box;
  border: solid 1px #ccc;
}

Updated Fiddle

Answer 2

将#trash 移动到.container 中，喜欢这里https://jsfiddle.net/6ph8rgjy/3/

Answer 3

像这样设置#todoListWrapper 容器属性...

#todoListWrapper {
    width: 960px;
    text-align: center;
    overflow: hidden;
}

Changed fiddle这里