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