vuedraggable拖拽列表设置某一条元素禁止被拖拽

Vue中vuedraggable不可拖拽设置

原创已于 2024-02-27 09:42:17 修改 · 6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #npm

于 2023-11-15 01:20:54 首次发布

vue 同时被 2 个专栏收录

35 篇文章

订阅专栏

npm

13 篇文章

订阅专栏

博客介绍了在Vue中使用vuedraggable时设置不可拖拽的方法。一是在draggable节点属性filter设置不可拖拽的class名并加“.”；二是在draggable子节点不可拖拽的dom的class中添加对应class名，还可优化鼠标样式，不可拖拽时设为箭头。

直接上代码

<draggable filter=".unDrag">
    <div class="unDrag">不能拖拽</div>
    <div class="canDrag">可以拖拽</div>
</draggable>

一、设置filter

在draggable节点的属性filter设置不可拖拽的class名，记住要加上"."

二、设置不可拖拽子节点class

在draggable子节点中不可拖拽的dom的class中添加filter中对应的class名

这里有个优化的点是：

一般我们拖拽项目时，鼠标显示的是手，就是设置cursor: pointer。但是如果项目设置为不可拖拽了的话，需要给不可拖拽的class名设置鼠标是箭头，就是设置cursor: auto

三、关于vuedraggable

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小马甲丫

关注关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置

日常笔记/总结/系列知识梳理

10-20

3547

draggable的github地址// 安装 npm install vuedraggable // 引入 import draggable from 'vuedraggable'

vuedraggable使用filter 后，关联的输入框失效（输入框无法获取焦点）

张小胖

05-26

2575

官方文档传送门一、什么是draggable，用来干嘛的 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。二、draggable 安装 NPM或yarn安装方式 yarn add vuedraggable n

参与评论您还未登录，请先登录后发表或查看评论

VueDraggable实现拖拽功能

chaoxxggg的博客

09-12

1427

是一个功能强大且易于使用的库。v-model和 item-key是基础，必须正确设置。使用 group属性实现多列表交互。通过Props(如animationhandleghostClass) 来定制拖拽行为和外观。监听Events(如endaddchange) 来在拖拽操作后执行业务逻辑（例如，向服务器发送更新后的排序）。利用Slotsitemheaderfooter) 来灵活地定义列表结构。希望这份详尽的指南能帮助你完全掌握！

Vue3 使用 vuedraggable拖拽排序；禁用 / 拖拽 / 悬浮样式等细节

qq_41662145的博客

02-11

2892

我们为拖拽中的项目和占位符分别定义了.ghost和样式类，以便用户可以清楚地看到当前拖拽的状态。important;important;通过以上步骤，我们成功地使用Vue3和实现了表头字段的拖拽排序，并且能够灵活地控制哪些项目不可拖拽，以及定制拖拽过程中的视觉效果。这不仅提高了用户体验，还增加了界面的交互性和实用性。希望这篇文章能帮助你在自己的项目中实现类似的功能。

Vue.Draggable拖拽锁定功能：临时禁用拖拽操作

最新发布

gitblog_00589的博客

10-09

1018

在开发交互式Web应用时，我们经常需要实现列表拖拽功能，但有时也需要根据特定条件临时禁用某些项的拖拽能力。Vue.Draggable作为基于SortableJS的Vue组件，提供了灵活的拖拽锁定解决方案。本文将详细介绍如何在实际项目中应用拖拽锁定功能，解决"禁止特定项拖拽"和"临时禁用整个列表拖拽"的常见需求。 ## 拖拽锁定的核心实现 Vue.Draggable通过SortableJS的AP...

Vue.Draggable拖拽组件使用

m0_61043829的博客

08-19

2970

Vue.Draggable是一款基于 Sortable.js 的 Vue 拖拽排序组件，它通过绑定数组实现视图与数据的同步更新。vuedraggable 支持列表项的拖拽排序、跨列表拖拽、手动排序等功能，且兼容。'禁用拖拽' : '启用拖拽' }}</button>vuedraggable 还支持跨列表的拖拽。在需要使用拖拽功能的 Vue 组件中，首先要引入 Vue.Draggable。在使用 Vue.Draggable 之前，需要先进行安装。Vue.Draggable 提供了丰富的配置项，通过。

vue2中vuedraggable设置部分元素不可拖拽，不可移动

weixin_44784401的博客

06-28

3218

vue2中vuedraggable设置部分元素不可拖拽，不可移动

vue-draggable-plus实现某些子元素不被拖拽

qq_38210427的博客

03-15

567

在使用时倘若只是节点里面所有元素都可以拖拽倒还好实现，但遇到某些子元素是作为其他作用不可拖拽或者可拖拽不可替换这些情况，则比较头疼了。

draggable拖拽的时候将一个元素设置禁止拖拽和被拖拽

m_uncle的博客

04-24

1208

filter=“.unmover” :class=“{unmover:index==='000'}” 表示当前不能被拖拽:move=“onMoveCeshi” 表示不能被停靠，其他元素不可以与当前元素调换位置

draggable拖拽列表设置某一条元素禁止被拖拽

小羊的博客

09-08

2981

使用draggable拖拽列表设置某一条元素不能被拖拽 filter=".unmover" :move="onMove"

vue3.0 + draggable 中解决某个元素不能拖曳

weixin_53849180的博客

08-25

3110

vue3.0 + draggable 中如何设置部分元素不能拖曳？

vuedraggable互相拖动：禁止拖动元素，和禁止拖动到的区域，以及禁止拖动整体。

weixin_459417989的博客

12-26

1万+

vuedraggable互相拖动禁止拖动、区域、位置、元素

draggable禁止拖动_vue.draggable disabled 开启和禁用拖动

weixin_39635657的博客

12-22

8613

vue.draggable disabled 开启和禁用拖动通过disabled属性实现开启或禁用vue.draggable的拖拽效果。disabled属性{{item.name}}//导入draggable组件import draggable from 'vuedraggable'export default {//注册draggable组件components: {draggable,},da...

【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）