Jquery 可排序/可滚动标签跳跃

Question

我有一些可排序/可滚动的选项卡，但当我开始排序时，同级选项卡一直在跳动。

坐标轴设置为'x'，排序的时候可以稍微上下拖动，就是跳跃的地方。

通常我会通过设置 float: left; 来解决这个问题，但这会导致每个选项卡都在它自己的 "row" 中。

如何解决可排序/可滚动选项卡中的这个 "jumping" 问题？

$('.data_tab_tabs').sortable({
  items: '.data_tab',
  axis: 'x',
  containment: 'parent',
  helper: 'clone',
  appendTo: 'parent',
  forcePlaceholderSize: true,
  tolerance: 'pointer',
});

.data_tab_container {
  width: 500px;
  height: fit-content;
  position: relative;
}

.data_tab_tabs {
  height: 40px;
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.data_tab {
  border: 1px solid #ddd;
  display: inline-block;
  width: fit-content;
  height: 100%;
  border-radius: 5px 5px 0 0;
  padding: 10px 10px;
  background: #f1f3f6;
  cursor: pointer;
  position: relative;
  z-index: 10;
  margin-right: 4px;
  /*   float: left; */
  font-weight: 600;
}

.data_tab * {
  display: inline-block;
}

.data_tab.active_data_tab {
  background: #fff;
  border-bottom: 1px solid #fff;
}


/* width */

.data_tab_tabs::-webkit-scrollbar {
  height: 6px !important;
}


/* Track */

.data_tab_tabs::-webkit-scrollbar-track {
  background: transparent !important;
}


/* Handle */

.data_tab_tabs::-webkit-scrollbar-thumb {
  background: #ddd !important;
  border-radius: 3px;
}


/* Handle on hover */

.data_tab_tabs::-webkit-scrollbar-thumb:hover {
  background: #ccc !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="data_tab_container">
  <div class="data_tab_tabs">
    <div class="data_tab active_data_tab" data-tab="headers" data-level="1">Here is something</div>
    <div class="data_tab" data-tab="body" data-level="1">Here is something else</div>
    <div class="data_tab" data-tab="footers" data-level="1">Here is something else again</div>
  </div>
</div>

Answer 1

是的，float:left; 将解决您的排序问题，但它会打开另一个问题，即第 3 个选项卡换行。

这是因为第 3 个选项卡 space 不够用。如果您从 .data_tab_container 样式中删除 width: 500px;，您将看到它工作正常。

请参阅下面的代码段：

$('.data_tab_tabs').sortable({
  items: '.data_tab',
  axis: 'x',
  containment: 'parent',
  helper: 'clone',
  appendTo: 'parent',
  forcePlaceholderSize: true,
  tolerance: 'pointer',
});

.data_tab_container {
  /*width: 500px;*/
  height: fit-content;
  position: relative;
}

.data_tab_tabs {
  height: 40px;
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.data_tab {
  border: 1px solid #ddd;
  display: inline-block;
  width: fit-content;
  height: 100%;
  border-radius: 5px 5px 0 0;
  padding: 10px 10px;
  background: #f1f3f6;
  cursor: pointer;
  position: relative;
  z-index: 10;
  margin-right: 4px;
  float: left;
  font-weight: 600;
  
}

.data_tab * {
  display: inline-block;
}

.data_tab.active_data_tab {
  background: #fff;
  border-bottom: 1px solid #fff;
}


/* width */

.data_tab_tabs::-webkit-scrollbar {
  height: 6px !important;
}


/* Track */

.data_tab_tabs::-webkit-scrollbar-track {
  background: transparent !important;
}


/* Handle */

.data_tab_tabs::-webkit-scrollbar-thumb {
  background: #ddd !important;
  border-radius: 3px;
}


/* Handle on hover */

.data_tab_tabs::-webkit-scrollbar-thumb:hover {
  background: #ccc !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="data_tab_container">
  <div class="data_tab_tabs">
    <div class="data_tab active_data_tab" data-tab="headers" data-level="1">Here is something</div>
    <div class="data_tab" data-tab="body" data-level="1">Here is something else</div>
    <div class="data_tab" data-tab="footers" data-level="1">Here is something else again</div>
  </div>
</div>

更新 2

已通过在占位符中添加 1px 高度（jQuery 在您开始拖动时添加）来修复它。我认为它是 jQuery..

中的一个未解决的错误

这是一个修复程序

.ui-sortable-placeholder {
  display: inline-block;
  height: 1px;
}

请参阅下面的代码段：

$('.data_tab_tabs').sortable({
  items: '.data_tab',
  axis: 'x',
  containment: 'parent',
  helper: 'clone',
  appendTo: 'parent',
  forcePlaceholderSize: true,
  tolerance: 'pointer',
  start: function(event, ui) { 
  ui.placeholder.html('&nbsp;'); 
 }
});

.data_tab_container {
  width: 500px;
  height: fit-content;
  position: relative;
}

.data_tab_tabs {
  height: 55px; /* changin height from 40px to 55px */
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.data_tab {
  border: 1px solid #ddd;
  display: inline-block;
  width: fit-content;
  /*height: 100%;*/
  border-radius: 5px 5px 0 0;
  padding: 10px 10px;
  background: #f1f3f6;
  cursor: pointer;
  position: relative;
  z-index: 10;
  margin-right: 4px;
  /*   float: left; */
  font-weight: 600;
}

.data_tab * {
  display: inline-block;
}

.data_tab.active_data_tab {
  background: #fff;
  border-bottom: 1px solid #fff;
}

.ui-sortable-placeholder {
  display: inline-block;
  height: 1px;
}


/* width */

.data_tab_tabs::-webkit-scrollbar {
  height: 6px !important;
}


/* Track */

.data_tab_tabs::-webkit-scrollbar-track {
  background: transparent !important;
}


/* Handle */

.data_tab_tabs::-webkit-scrollbar-thumb {
  background: #ddd !important;
  border-radius: 3px;
}


/* Handle on hover */

.data_tab_tabs::-webkit-scrollbar-thumb:hover {
  background: #ccc !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="data_tab_container">
  <div class="data_tab_tabs">
    <div class="data_tab active_data_tab" data-tab="headers" data-level="1">Here is something</div>
    <div class="data_tab" data-tab="body" data-level="1">Here is something else</div>
    <div class="data_tab" data-tab="footers" data-level="1">Here is something else again</div>
  </div>
</div>

Answer 2

我必须将元素 .data_tab_tabs 包含在另一个 div 中，我将其命名为 .data_tab_scroll。

我必须做很多 css 更改才能使其正常工作，而不会破坏选项卡的正常显示方式或排序方式。

进行这些更改后，出现了另一个问题，即当滚动条可见时，可排序占位符宽度只会 1px 宽。为了解决这个问题，我需要 .data_tab_tabs 有 width: fit-content，.data_tab_scroll 有 width: 100%;。有一个与此问题相关的问题 here

此处的片段仍然存在原始问题，Internet Explorer 也是如此。

您可以在我的 codepen

中找到一个工作示例

Jquery 可排序/可滚动标签跳跃

Jquery sortable / scrollable tabs jumping

javascript

jquery

css

scroll

jquery-ui-sortable