layui treetable 开启拖拽功能
时间: 2023-10-05 19:04:34 浏览: 183
要启用layui treetable的拖拽功能,你需要在treetable的配置对象中设置drag开关为true,如下所示:
```
var treetable = layui.treetable;
treetable.render({
// ...
drag: true, // 开启拖拽功能
// ...
});
```
此外,你还需要在每个可拖拽的节点上添加一个自定义属性`data-id`来标识当前节点的id,如下所示:
```
<table id="demo" lay-filter="tableFilter"></table>
<script>
// ...
var treetable = layui.treetable;
treetable.render({
// ...
drag: true, // 开启拖拽功能
// ...
done: function() {
// 给每个可拖拽的节点添加data-id属性
var nodes = document.querySelectorAll('.layui-table-body tr[data-id]');
nodes.forEach(function(node) {
node.setAttribute('draggable', 'true');
});
}
});
// ...
</script>
```
然后你需要在每个可拖拽的节点上绑定拖拽相关的事件,如下所示:
```
<script>
// ...
var treetable = layui.treetable;
treetable.render({
// ...
drag: true, // 开启拖拽功能
// ...
done: function() {
// 给每个可拖拽的节点添加data-id属性
var nodes = document.querySelectorAll('.layui-table-body tr[data-id]');
nodes.forEach(function(node) {
node.setAttribute('draggable', 'true');
node.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text', this.getAttribute('data-id'));
});
node.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('dragover');
});
node.addEventListener('dragleave', function(e) {
this.classList.remove('dragover');
});
node.addEventListener('drop', function(e) {
e.preventDefault();
var fromId = e.dataTransfer.getData('text');
var toId = this.getAttribute('data-id');
// 进行节点的拖拽操作
// ...
});
});
}
});
// ...
</script>
```
在拖拽事件的处理函数中,你可以获取到拖拽的起始节点和目标节点的id,然后根据业务需求进行节点的拖拽操作。
阅读全文