vuedraggable 移动时禁止拖拽指定控件到指定容器组

最新推荐文章于 2025-02-11 15:58:44 发布

無題_

最新推荐文章于 2025-02-11 15:58:44 发布

阅读量2.4k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_58018769/article/details/130380746

版权

通过在move属性中绑定事件，实时判断拖拽的控件是否能进入特定容器。在事件处理函数onMove中，获取draggedContext的element（当前拖拽控件）和目标容器的class（e.to._prevClass），依据控件名和容器class进行条件判断，返回true或false决定是否允许拖入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

找了特别特别多资料，最后才发现就这么简单。

之前尝试过add、end，这两个都是在事件结束之后才出发回调，最好的解决办法是在移动时就判断，当前拖拽的控件要不要拖拽进这个容器组，于是，就只能在move属性里面绑定一个事件，return给它true或者false。

首先，我们先打印看一下给move属性绑定的事件是什么

这个draggedContext里面的element就是当前拖拽的控件，这个to里面则是你当前移动到的容器的class，有了这两个就可以开始判断了

代码如下：

onMove(e) {
    console.log(e);
	let moveName = e.draggedContext.element.name // 这个是当前拖拽的控件名
    // 接下来判断该控件要不要拖进指定的容器
	if(moveName == '禁止拖拽进容器的控件名' && e.to._prevClass=='要拖进的容器的class名')return false
    //符合条件返回false，否则返回true
	return true
},

至此，结束