el-tree的可拖拽效果太不明显，产品需要添加可拖拽的效果，弄了个阴影。
项目需求是只能同级拖拽，无法跨级拖拽。点击层级的切换顺序的按钮，出现拖拽效果。文章来源：https://www.toymoban.com/news/detail-521992.html
<el-tree :load="loadNode" lazy :draggable="sequenceFlag" :allow-drop="allowDrop">
<template slot-scope="{ node, data }">
<div :class="{'draggable-item':orderList.findIndex((item) => item ==data.id) !== -1}">
...
<span class="hover-btn">
<el-button type="text" @click.stop="setOrderList(node,data)" v-show="sequenceFlag == false">
<svg-icon iconname="zt_zidongpaixu" size="16"></svg-icon>
</el-button>
<el-button type="text" @click.stop="getOrderList(node,data)"
v-show="sequenceFlag && data.id === orderId">
<svg-icon iconname="zt_wancheng1" size="16" style="color:#16C6BE"></svg-icon>
</el-button>
</span>
</template>
</el-tree>
//只允许同级拖拽
allowDrop(draggingNode, dropNode, type) {
// console.log(draggingNode, dropNode, type);
if (this.orderList.findIndex((item) => item == draggingNode.data.id) !== -1) {
if (draggingNode.level === dropNode.level) {
if (draggingNode.data.parentId === dropNode.data.parentId) {
return type === 'prev' || type === 'next';
} else {
return false;
}
} else {
// 不同级进行处理
return false;
}
} else {
return false;
}
}
setOrderList(node, data) {
this.orderList = [];
if (data.children.length > 0) {
this.sequenceFlag = true;
data.children.map((item, index) => {
this.orderList.push(item.id);
});
//样式效果代码
let dragNode: any = document.getElementsByClassName('draggable-item');
setTimeout(() => {
// getElementsByClassName拿到的用foreach等方法无法遍历
for (let i = 0; i < dragNode.length; i++) {
let parent = dragNode[i].parentNode;
parent.classList.add('AssetsDraggingNode');
}
}, 500);
}
css代码必须去掉scoped才能实现文章来源地址https://www.toymoban.com/news/detail-521992.html
<style lang="scss">
.AssetsDraggingNode {
box-shadow: 0 0 6px #888;
margin: 10px 5px;
border-radius: 4px;
}
</style>
到了这里，关于【element ui】el-tree拖拽增加样式效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
