easyui tab标签页拖拽排序

Posted 2023-04-01

如图,我想让12345标签也可拖拽还能返回顺序
求求大神们怎么实现啊?
实在不行,不用拖拽也可以,使用标签页上的上下按钮进行移动.
随便哪种方法都行
我的tab标签也已经创建好了,就像图中那样,
我是问:怎样实现改变标签页的顺序?比如:让4号标签页跑到最上面去

参考技术A 经由标记创建Tabs
从标记创建Tabs更容易，我们不需要写任何javascript代码。记住把 'easyui-tabs' 类添加到<div/>标记，每个tab panel 经由子<div/>标记被创建，其用法与Panel一样。

复制代码代码如下:
<div id="tt" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">
tab3
</div>
</div>

2. 编程创建Tabs
现在我们编程创建 Tabs，我们同时捕捉 'onSelect' 事件。
复制代码代码如下:
$('#tt').tabs(
border:false,
onSelect:function(title)
alert(title+' is selected');

);

增加新的 tab panel
复制代码代码如下:
// 增加一个新的 tab panel
$('#tt').tabs('add',
title:'New Tab',
content:'Tab Body',
closable:true
);

获取选中的 Tab
复制代码代码如下:
// 获取选中的 tab panel 和它的 tab 对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的 tab 对象。

禁止在当前页拖拽内容打开，禁止拖拽图片在新窗口打开-解决办法。

document.ondragover = function (e) { e.preventDefault(); };
document.ondrop = function (e) { e.preventDefault(); };
$(document).on("dragstart", function (e) {
    return false;
});