为什么在添加"overflow:auto"时拖放更加顺畅？

Question

我正在为网站制作CMS.在CMS中,我想制作拖放/可选择索引.

在占位符上拖放并不是很顺利.但是在我添加overflow: auto到可以拖放/选择的div 之后,它会更顺畅,更容易使用.

有人能解释我为什么会这样吗？

它仅显示您的网页中是否有多个div.(就像在一个差不多完成的网站上.)这种情况发生在Chrome和Firefox中.(我没有在其他浏览器中测试它.)

随着溢出自动 < - 更顺畅

没有溢出自动 < - 它没有做你想要的

Answer 1

您必须考虑 HTML 元素。每个 HTML 元素都包装在自己的“盒子”中。对于每个框，您可以设置其 CSS 属性，如height、width、margin、padding等。每个盒子的设计都可以扩展其内容，即使您给它一套height。这种状态被称为overflow: visible;并且是每个元素的默认状态。

在您的情况下，您将一个元素中的元素拖动到另一个元素。让我们稍微分解一下。在开始拖动之前，我们的元素存在于另一个元素中，并且也继承了它的属性。子元素将尽力适应父元素。当我们拖动子元素时，jQuery允许子元素脱离父元素，并且不再继承父元素的属性。子元素的内容现在将扩展到其自己的 CSS 属性，直到您将其拖动到另一个父元素中，此时它将继承新父元素的属性。

就像子元素受父元素影响一样，父元素也可能受到子元素的影响。毕竟，它的默认设置是overflow: visible;并且想要显示其中包含的所有内容。因此，如果父项位于100px且width子项位于，则子项将在父项原始大小之外200px可见。100 px

由于设计者希望将我们的元素包含在固定大小，无论是基于父元素的px值还是分数，因此我们需要一种方法来防止子元素溢出到父元素之外。%这就是 CSS overflow: hidden;、scroll;、 和auto;发挥作用的地方。我确实想指出，有overflow-x和overflow-y属性，但是，我不会过多介绍它们，因为它们是不言自明的。Overflow: hidden;将简单地隐藏将溢出到父元素之外的内容。此选项不会为用户提供滚动条来查看溢出的内容。因此Overflow: Scroll显示滚动条，以便用户可以滚动并查看父元素内隐藏的溢出内容。此选项将始终显示垂直和水平滚动条。注意：这就是为什么有overflow-x和overflow-y属性，但是对于overflow: auto;，它们不是必需的。

Overflow: auto;是只为内容提供必要的滚动条的解决方案，并且作为奖励，如果内容没有溢出，则不会显示滚动条。因此，当我们查看您的div.sortobject, without时overflow: auto;，它将尝试在视觉上拉伸以适合其子元素。当您开始拖动元素时，潜在的父 div 在视觉上会溢出，试图调整子元素和 jQuery 辅助元素的大小，该元素向用户显示放置内容的位置。设置overflow: auto;将导致父元素始终保留其设置width和height，因此当您拖动子元素时，它会平滑地显示，因为没有潜在的父元素正在调整大小。jQuery 喜欢计算它所影响的元素的当前精确尺寸，并且也会改进动画。

我希望这能提供一些见解。