update

docs/tabs/index.md

@@ -357,6 +357,19 @@ tabs.on('afterClose(testID)', function(data) {
 });
 ```
 
+<h3 id="on-dragend" class="ws-anchor ws-bold">标签拖拽结束后的事件 <sup>2.12+</sup></h3>
+
+`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 组件。

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);
           }
         };