Question

我想创建一个简单的页面，通过输入任务记录一周内的任务，按回车键创建当天的列表项目。用户可以在列之间拖动任务或通过拖动到id为#trash

的底部框来删除它们

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

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

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

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

您可以在此处找到我的代码：https://jsfiddle.net/minhha0317/6ph8rgjy/

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

Answer 1

只需从overflow:auto移除.container。

.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此处

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

3 个答案: