javascript - Jquery 可排序/可滚动选项卡跳跃

Question

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

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

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

如何在可排序/可滚动选项卡中停止这种“跳跃”问题？

$('.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 个选项卡换行。

这是因为没有足够的空间容纳第三个标签。如果您从 .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 中的一个 Unresolved 错误..

这里有一个修复

.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(' '); 
	}
});

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