diff --git a/docs/tabs/index.md b/docs/tabs/index.md
index de26219a..4c2aabb6 100644
--- a/docs/tabs/index.md
+++ b/docs/tabs/index.md
@@ -357,6 +357,19 @@ tabs.on('afterClose(testID)', function(data) {
});
```
+
标签拖拽结束后的事件 2.12+
+
+`tabs.on('dragend(id)', callback)`
+
+标签拖拽结束后触发。
+
+```js
+// tabs 拖拽结束后的事件
+tabs.on('dragend(testID)', function(data) {
+ console.log(data);
+});
+```
+
## 💖 心语
tabs 是通过 component 重构的首个组件,它来自于最早试图发布的 Layui 3.0(后因为 3.0 技术路线的变化,而整理放至 2.10+ 版本中),目的是将 element 模块中的 tab 组件进行解耦,增强其可扩展性。为了给开发者必要的时间缓冲,我们会将旧 tab 组件仍然保留在后续的若干版本中,但会在合适的时机对旧 tab 组件进行剔除,建议开发者尽量提前过渡到当前新的 tabs 组件。
diff --git a/src/modules/tabs.js b/src/modules/tabs.js
index b592468e..62a24965 100644
--- a/src/modules/tabs.js
+++ b/src/modules/tabs.js
@@ -733,11 +733,13 @@ layui.define('component', function(exports) {
var that = this;
var namespace = '.lay-tabs-drag';
var container = headerElem.parent();
- var scrollable = container.hasClass('layui-tabs-scroll');
var draggedElem;
- var scrollWidth = headerElem.prop('scrollWidth');
- var outerWidth = headerElem.outerWidth();
+ var scrollable;
+ var tabListSize;
+ var containerSize;
var scrollThreshold = 100;
+ var maxOffset = 0;
+ var minOffset;
var isDndElem = function(el) {
return el && el.nodeName.toLowerCase() == 'li' && !!el.getAttribute('lay-id');
@@ -747,6 +749,10 @@ layui.define('component', function(exports) {
headerElem.on('mousedown' + namespace, '>li', function() {
if(isDndElem(this)){
this.draggable = true;
+ scrollable = container.hasClass('layui-tabs-scroll');
+ tabListSize = headerElem.prop('scrollWidth');
+ containerSize = headerElem.outerWidth();
+ minOffset = containerSize - tabListSize;
}
});
headerElem.on('dragstart' + namespace, function(e) {
@@ -761,14 +767,11 @@ layui.define('component', function(exports) {
});
headerElem.on("dragover" + namespace, function (e) {
e.preventDefault();
- e.originalEvent.dataTransfer.dropEffect = "move";
+ e.originalEvent.dataTransfer.dropEffect = 'move';
// 拖拽边缘滚动
if (scrollable) {
- var tabLeft = headerElem.data("left") || 0;
var containerRect = container[0].getBoundingClientRect();
- var step = 200;
- var rAFStep = 5;
var isScrollLeft = e.clientX - containerRect.left < scrollThreshold;
var isScrollRight = containerRect.right - e.clientX < scrollThreshold;
@@ -776,20 +779,24 @@ layui.define('component', function(exports) {
return;
}
+ var step = 35;
+ var rAFStep = 5;
+ var newOffset = headerElem.data('left') || 0;
+
var cb = function () {
if (step > 0) {
step -= rAFStep;
if (isScrollLeft) {
- tabLeft += rAFStep;
+ newOffset = newOffset + rAFStep;
} else if (isScrollRight) {
- tabLeft += -rAFStep;
+ newOffset = newOffset - rAFStep;
}
- if (tabLeft > 0) {
- tabLeft = 0;
- } else if (tabLeft < outerWidth - scrollWidth) {
- tabLeft = outerWidth - scrollWidth;
+ if (newOffset > maxOffset) {
+ newOffset = maxOffset;
+ } else if (newOffset < minOffset) {
+ newOffset = minOffset;
}
- headerElem.css("left", tabLeft).data("left", tabLeft);
+ headerElem.css('left', newOffset).data('left', newOffset);
rAF(cb);
}
};