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

小马甲丫

已于 2024-02-27 09:42:17 修改

阅读量2k

点赞数 5

分类专栏： # vue # npm 文章标签：前端 vue npm

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

本文链接：https://blog.csdn.net/u012804440/article/details/134411175

版权

vue 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

npm

13 篇文章 0 订阅

订阅专栏

直接上代码

<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

关注博主即可阅读全文

优惠劵

小马甲丫

关注关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vuedraggable拖拽列表设置某一条元素禁止被拖拽

vuedraggable拖拽列表设置某一条元素禁止被拖拽
复制链接

扫一扫

专栏目录

vue.draggable实现拖拽排序，设置可拖拽位置以及不允许拖拽元素

GardJasmin的博客

02-22

7385

<table>  <tr> <th width="60">排序</th> <th width="200">部门名称</th> <th width="200">部门类型</th> </tr>  <draggable tag="tbody" :...

vuedraggable 阻止默认拖动事件

Admans的专栏

01-21

500

【代码】vuedraggable 阻止默认拖动事件。

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

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

weixin_53849180的博客

08-25

2449

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

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

小羊的博客

09-08

2421

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

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

weixin_39635657的博客

12-22

8083

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

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

weixin_459417989的博客

12-26

1万+

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

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

weixin_58018769的博客

04-26

1825

在move属性里面绑定一个事件，return给它true或者false，打印一下事件，draggedContext里面的element就是当前拖拽的控件，这个to里面则是你当前移动到的容器的class，有了这两个就可以开始判断了

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

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

10-20

1644

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

VUE-鼠标移入到目标区域变成禁用模样

weixin_45954050的博客

07-17

486

我们只需要在这个元素上添加【cursor：no-drop】就可以实现。这个需求是平常开发中常用的一个样式。

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

热门推荐

一个努力学习的程序猿

04-11

2万+

在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。

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

张小胖

05-26

2027

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

WEB转Flutter基础学习笔记（内含vue和flutter对比）

小易不止于搬砖的博客

05-17

673

笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter

vue3.0+antdv的admin管理系统vue-admin-beautiful推荐

独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)

05-15

1115

几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。

Unable to start ServletWebServerApplicationContext due to missing ServletWeb

s_sos0的博客

05-14

521

Unable to start ServletWebServerApplicationContext due to missing ServletWeb

解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器

shijialeya

05-18

403

解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。

综合性练习-验证码

cj13106811623的博客

05-15

822

生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。

springboot+vue2+elementui实现时间段查询

最新发布

2301_76604664的博客

05-20

287

将前端传来的时间数组，赋值给对应的属性；

vue3专栏项目 -- 五、权限管理（下）

m0_64931189的博客

05-15

820

我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：

vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期

Dnn01的博客

05-14

299

vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期

vuedraggable vue3怎么使用

04-23

vuedraggable是一个基于Vue.js的拖拽排序组件，用于实现可拖拽的列表或表格。在Vue 3中，使用vuedraggable需要进行以下步骤： 1. 首先，确保你已经安装了Vue 3和vuedraggable。可以通过npm或yarn进行安装： ``` npm install vue@next vuedraggable ``` 或 ``` yarn add vue@next vuedraggable ``` 2. 在你的Vue应用程序的入口文件（通常是main.js或app.js）中，导入Vue和vuedraggable，并将它们注册为全局组件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import VueDraggable from 'vuedraggable'; const app = createApp(App); app.component('VueDraggable', VueDraggable); app.mount('#app'); ``` 3. 在你的Vue组件中，可以使用`<vue-draggable>`标签来包裹需要拖拽排序的元素。例如： ```html <template> <div> <h2>可拖拽的列表：</h2> <vue-draggable v-model="list"> <div v-for="item in list" :key="item.id">{{ item.name }}</div> </vue-draggable> </div> </template> <script> export default { data() { return { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ], }; }, }; </script> ``` 以上就是使用vuedraggable在Vue 3中实现拖拽排序的基本步骤。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交