Javascript Jquery可排序/可滚动选项卡

我有一些可排序/可滚动的选项卡，但当我开始排序时，兄弟选项卡会不断跳转

轴设置为“x”，但在排序时，您可以稍微上下拖动，这就是您将看到跳跃的地方

通常我会通过设置float:left来解决这个问题；但这会导致每个选项卡以某种方式位于自己的行中

如何在可排序/可滚动选项卡中停止此跳跃问题

$'.data\u tabs\u tabs'。可排序{ 项目：'.data_选项卡'， 轴：“x”， 包含：'父'， 助手：“克隆”， 附加到：'父'， 大小：true， 公差：“指针”， }; .data\u选项卡\u容器{ 宽度：500px； 高度：适合的内容； 位置：相对位置； } .数据选项卡{ 高度：40px； 宽度：适合的内容； 最大宽度：100%； 位置：相对位置； 溢出-x：滚动； 溢出y：隐藏； 空白：nowrap； } .data_选项卡{ 边框：1px实心ddd； 显示：内联块； 宽度：适合的内容； 身高：100%； 边界半径：5px5px0； 填充：10px 10px； 背景：f1f3f6； 光标：指针； 位置：相对位置； z指数：10； 保证金权利：4px； /*浮动：左*/ 字号：600； } .data_选项卡*{ 显示：内联块； } .data\u选项卡。active\u data\u选项卡{ 背景：fff； 边框底部：1px实心fff； } /*宽度*/ .数据选项卡选项卡：：-webkit滚动条{ 高度：6px！重要； } /*跟踪*/ .数据选项卡选项卡：：-webkit滚动条轨迹{ 背景：透明！重要； } /*处理*/ .data_tab_tab:：-webkit滚动条拇指{ 背景：ddd！重要； 边界半径：3px； } /*悬停手柄*/ .data_tab_tab:：-webkit滚动条拇指：悬停{ 背景：ccc！重要； } 这里有些东西 还有一件事 这又是另外一件事 是，浮动：左；将解决您的排序问题，但它将打开另一个问题，第三个标签在新行中

这是因为没有足够的空间放置第三个选项卡。如果移除宽度：500px；从.data\u tab\u容器样式中，您将看到它工作正常

请参见下面的代码段：

$'.data\u tabs\u tabs'。可排序{ 项目：'.data_选项卡'， 轴：“x”， 包含：'父'， 助手：“克隆”， 附加到：'父'， 大小：true， 公差：“指针”， }; .data\u选项卡\u容器{ /*宽度：500px*/ 高度：适合的内容； 位置：相对位置； } .数据选项卡{ 高度：40px； 宽度：适合的内容； 最大宽度：100%； 位置：相对位置； 溢出-x：滚动； 溢出y：隐藏； 空白：nowrap； } .data_选项卡{ 边框：1px实心ddd； 显示：内联块； 宽度：适合的内容； 身高：100%； 边界半径：5px5px0； 填充：10px 10px； 背景：f1f3f6； 光标：指针； 位置：相对位置； z指数：10； 保证金权利：4px； 浮动：左； 字号：600； } .data_选项卡*{ 显示：内联块； } .data\u选项卡。active\u data\u选项卡{ 背景：fff； 边框底部：1px实心fff； } /*宽度*/ .数据选项卡选项卡：：-webkit滚动条{ 高度：6px！重要； } /*跟踪*/ .数据选项卡选项卡：：-webkit滚动条轨迹{ 背景：透明！重要； } /*处理*/ .data_tab_tab:：-webkit滚动条拇指{ 背景：ddd！重要； 边界半径：3px； } /*悬停手柄*/ .data_tab_tab:：-webkit滚动条拇指：悬停{ 背景：ccc！重要； } 这里有些东西 还有一件事 这又是另外一件事

---

我必须将元素.data\u tab\u tabs包含在我命名的另一个div中.data\u tab\u scroll

我不得不做了很多css更改，以使其正常工作，而不会破坏选项卡的正常外观或排序方式

通过这些更改，出现了另一个问题，即当滚动条可见时，可排序占位符的宽度仅为1px。要解决这个问题，我需要.data_tab_tabs的宽度为：fit content，for.data_tab_滚动的宽度为：100%；。有一个问题与这个问题有关

这里的代码片段仍然有原始版本，Internet Explorer也是如此

---

您可以在my

中找到一个工作示例，这不是问题所在，当您开始排序时，您将看到选项卡在y轴上上下移动。。。我已经设置了一个宽度来复制一个容器，在这个容器中标签会溢出，需要一个滚动条。@请再次测试它。我已经修改了文件answer@Souleste你检查答案了吗？是的，在我的中似乎不起作用。我已经用jQuery修复了它。看起来CSS在codepen中不起作用。。因此，我添加了替代方案。你可以测试一下