Jquery 可排序/可滾動標簽跳轉

Question

我有一些可排序/可滾動的選項卡，但是當我開始排序時，同級選項卡一直在跳動。

軸設置為“x”，但在排序時您可以稍微上下拖動，這是您將看到跳躍的地方。

通常我會通過設置float: left;來解決這個問題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; 將解決您的排序問題，但它會打開另一個問題，其中第三個選項卡進入新行。

這是因為第三個選項卡沒有足夠的空間。 如果刪除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(' '); } });

 .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我另一個名為專區內.data_tab_scroll 。

我必須做很多 css 更改才能使其正常工作，而不會破壞選項卡的正常外觀或排序方式。

通過這些更改，出現了另一個問題，即當滾動條可見時，可排序的占位符寬度僅為1px 。 為了解決這個問題，我需要.data_tab_tabs有width: fit-content和.data_tab_scroll有width: 100%; . 有此問題相關的問題在這里

此處的代碼段仍然存在原始問題，Internet Explorer 也是如此。

您可以在我的codepen 中找到一個工作示例