vuedraggable移动事件
时间: 2023-09-25 17:09:20 浏览: 20
vuedraggable是一个基于Vue.js的拖放插件,它提供了许多事件来处理拖放操作。其中比较常用的是以下几个事件:
1. `start`:当拖拽开始时触发的事件。
2. `move`:当拖拽过程中触发的事件。
3. `end`:当拖拽结束时触发的事件。
4. `add`:当拖拽元素被添加到列表中时触发的事件。
5. `remove`:当拖拽元素被从列表中移除时触发的事件。
6. `update`:当拖拽元素在列表中被移动时触发的事件。
这些事件都有相应的回调函数可以处理它们,比如:
```
<draggable @start="onStart" @move="onMove" @end="onEnd">
<!-- draggable content -->
</draggable>
```
在这个例子中,我们定义了三个事件回调函数:`onStart`、`onMove`和`onEnd`,它们分别处理拖拽开始、拖拽过程中和拖拽结束时的操作。你可以根据实际需求来选择需要处理的事件和相应的回调函数。
相关问题
vuedraggable 无法移动最后一个
vuedraggable 是一个基于 Vue.js 的拖拽组件,它可以帮助我们实现拖拽排序的功能。如果你无法拖动最后一个元素,可能是因为 vuedraggable 默认开启了“禁止拖拽最后一个元素”的选项。你可以通过设置 `:no-last-element-drag="false"` 来取消这个选项,让最后一个元素也可以拖拽。同时,你还可以通过设置 `:options="{group: 'xxx'}"` 来对拖拽组件进行更多的配置。具体可以参考 vuedraggable 的官方文档。
vuedraggable禁用
在使用vuedraggable组件时,如果要禁用某个控件的拖拽进指定的容器,可以通过在onMove事件中进行判断来实现。首先,获取当前拖拽的控件名,可以使用e.draggedContext.element.name来获取。接下来,可以使用条件判断来判断该控件是否要拖进指定的容器。如果符合条件,可以通过返回false来禁用该控件的拖拽进容器,否则返回true允许拖拽。
另外,之前尝试过add和end这两个事件,但它们在事件结束后才触发回调。为了在移动时就进行判断,最好的解决办法是在move属性中绑定一个事件,并根据条件返回true或false来禁用或允许拖拽。这样,就可以实现对vuedraggable组件中某个控件的禁用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)