github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update

feat/drage-sort
sight 2025-06-22 13:51:11 +08:00
parent b6310b8a83
commit 510ce30916
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
examples/tabs.html
View File

@ -9,22 +9,22 @@
<body> <body>
<div class="layui-container layui-padding-3 layui-text"> <div class="layui-container layui-padding-3 layui-text">
<h2>动态操作</h2> <h2>动态操作</h2>
<div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll'}"> <div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll', dragSort: true}">
<ul class="layui-tabs-header"> <ul class="layui-tabs-header">
<li lay-id="aaa" lay-closable="false">Tab1</li> <li lay-id="t-1" lay-closable="false">Tab1</li>
<li lay-id="bbb">Tab2</li> <li lay-id="t-2">Tab2</li>
<li lay-id="ccc">Tab3</li> <li lay-id="t-3">Tab3</li>
<li lay-id="ddd">Tab4</li> <li lay-id="t-4">Tab4</li>
<li lay-id="eee">Tab5</li> <li lay-id="t-5">Tab5</li>
<li lay-id="fff">Tab6</li> <li lay-id="t-6">Tab6</li>
</ul> </ul>
<div class="layui-tabs-body"> <div class="layui-tabs-body">
<div class="layui-tabs-item">Tab Content-1</div> <div lay-id="t-1" class="layui-tabs-item">Tab Content-1</div>
<div class="layui-tabs-item">Tab Content-2</div> <div lay-id="t-2" class="layui-tabs-item">Tab Content-2</div>
<div class="layui-tabs-item">Tab Content-3</div> <div lay-id="t-3" class="layui-tabs-item">Tab Content-3</div>
<div class="layui-tabs-item">Tab Content-4</div> <div lay-id="t-4" class="layui-tabs-item">Tab Content-4</div>
<div class="layui-tabs-item">Tab Content-5</div> <div lay-id="t-5" class="layui-tabs-item">Tab Content-5</div>
<div class="layui-tabs-item">Tab Content-6</div> <div lay-id="t-6" class="layui-tabs-item">Tab Content-6</div>
</div> </div>
</div> </div>

24
src/modules/tabs.js
View File

@ -735,11 +735,13 @@ layui.define('component', function(exports) {
var container = headerElem.parent(); var container = headerElem.parent();
var draggedElem; var draggedElem;
var scrollable; var scrollable;
var tabListSize; var tabListScrollSize;
var containerSize; var tabListOuterSize;
var scrollThreshold = 100;
var maxOffset = 0; var maxOffset = 0;
var minOffset; var minOffset;
var dragScrollLength = 35;
var dragScrollSpeed = 5;
var dragScrollPercentage = 12; // 容器边缘滚动区域大小，百分比值
var isDndElem = function(el) { var isDndElem = function(el) {
return el && el.nodeName.toLowerCase() == 'li' && !!el.getAttribute('lay-id'); return el && el.nodeName.toLowerCase() == 'li' && !!el.getAttribute('lay-id');
@ -750,9 +752,9 @@ layui.define('component', function(exports) {
if(isDndElem(this)){ if(isDndElem(this)){
this.draggable = true; this.draggable = true;
scrollable = container.hasClass('layui-tabs-scroll'); scrollable = container.hasClass('layui-tabs-scroll');
tabListSize = headerElem.prop('scrollWidth'); tabListScrollSize = headerElem.prop('scrollWidth');
containerSize = headerElem.outerWidth(); tabListOuterSize = headerElem.outerWidth();
minOffset = containerSize - tabListSize; minOffset = tabListOuterSize - tabListScrollSize;
} }
}); });
headerElem.on('dragstart' + namespace, function(e) { headerElem.on('dragstart' + namespace, function(e) {
@ -772,15 +774,15 @@ layui.define('component', function(exports) {
// 拖拽边缘滚动 // 拖拽边缘滚动
if (scrollable) { if (scrollable) {
var containerRect = container[0].getBoundingClientRect(); var containerRect = container[0].getBoundingClientRect();
var isScrollLeft = e.clientX - containerRect.left < scrollThreshold; var isScrollLeft = (e.clientX - containerRect.left) / containerRect.width * 100 < dragScrollPercentage;
var isScrollRight = containerRect.right - e.clientX < scrollThreshold; var isScrollRight = (containerRect.right - e.clientX) / containerRect.width * 100 < dragScrollPercentage
if (!isScrollLeft && !isScrollRight) { if (!(isScrollLeft || isScrollRight)) {
return; return;
} }
var step = 35; var step = dragScrollLength;
var rAFStep = 5; var rAFStep = dragScrollSpeed;
var newOffset = headerElem.data('left') || 0; var newOffset = headerElem.data('left') || 0;
var cb = function () { var cb = function () {