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

问题描述 投票：0回答：2

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

该轴设置为'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>
javascript jquery css scroll jquery-ui-sortable
2个回答
1
投票

是，float:left;将解决您的排序问题，但是它将在第三个选项卡添加到新行中时出现另一个问题。

这是因为第三个标签页没有足够的空间。如果从width: 500px;样式中删除.data_tab_container，则可以正常工作。

请参见下面的摘录：

$('.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>
0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.