本文介绍如何解决 element-plus 树节点拖拽中遇到的两个常见问题：限制拖拽范围和准确显示禁止拖放状态。
问题一：拖拽范围限制
现象：拖拽节点到树结构外部时，drop 事件仍然触发，导致树排序错误。这是因为 Element-Plus 未直接提供拖拽范围限制功能。
解决方案：自定义拖拽边界检查方法。通过计算鼠标坐标和树容器位置，判断鼠标是否在树容器内。
<code class="javascript">mounted() {
this.tree.drageventsoptions = {
outofboundscheckmethod: (event) => {
const { clientX, clientY } = event;
const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.$el;
return clientX >= offsetLeft && clientX <= offsetLeft + offsetWidth &&
clientY >= offsetTop && clientY <= offsetTop + offsetHeight;
}
};
}</code>
此方法检查鼠标 clientX 和 clientY 是否在树容器的边界内。
问题二：禁止拖放状态显示不准确
现象：allow-drop 属性控制的禁止拖放图标显示位置不准确，拖拽到节点内部时，图标仍显示允许拖放。这是因为 Element-Plus 默认使用 left 作为 drop 位置标识。
解决方案：修改 drop 位置标识为 top，并自定义 allow-drop 的逻辑。
<code class="vue"><el-tree-node :allow-drop="getNodeDisabledDrop" :data="node" :key="node.id" drop-position="top"> </el-tree-node></code>
<code class="javascript">methods: {
getNodeDisabledDrop(dropInfo) {
return !dropInfo.node.data.disabled;
}
}</code>
通过将 drop-position 设置为 top，图标将显示在节点上方，更清晰地指示拖放状态。getNodeDisabledDrop 方法根据节点的 disabled 属性动态控制是否允许拖放。
通过以上方法，您可以有效地限制 Element-Plus 树节点的拖拽范围，并准确显示禁止拖放状态，提升用户体验。
