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

news/2024/7/10 3:22:06 标签: 前端, vue, npm

直接上代码

<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


http://www.niftyadmin.cn/n/5191377.html

相关文章

《洛谷深入浅出基础篇》——P3405 citis and state ——哈希表

上链接&#xff1a;P3405 [USACO16DEC] Cities and States S - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P3405 上题干&#xff1a; 题目描述 Farmer John 有若干头奶牛。为了训练奶牛们的智力&#xff0c;Farmer John 在谷仓的墙上放了一…

若依启动步骤

1.创建数据库 2.启动redis 3.改后端的数据库连接配置 4.配置redis redis的地址&#xff1a;cmd中ipconfig命令查看 6.启动后端&#xff1a;如下 7.启动前端ruoyi-ui中 先运行npm install&#xff0c;再npm run dev。项目就启动成功了。 用户名&#xff1a;admin 密码&#x…

云计算>SDN(Software Defined Network)

SDN(Software Defined Network)的网络架构中包含&#xff1a;控制层、转发层和应用层。

SSER服务器请求伪造

SSRF漏洞 文章目录 SSRF漏洞概述SSRF原理SSRF危害SSRF利用文件访问端口扫描本地文件读取内网应用指纹识别攻击内网web应用注意: SSRF防御过滤输入过滤输出 SSRF挖掘 ​ 服务器会根据用户提交的 URL 发送一个 HTTP 请求。使用用户指定的 URL&#xff0c;Web 应用可以获取图片或者…

探索亚马逊大语言模型:开启人工智能时代的语言创作新篇章

文章目录 前言一、大语言模型是什么&#xff1f;应用范围 二、Amazon Bedrock总结 前言 想必大家在ChatGPT的突然兴起&#xff0c;大家多多少少都会有各种各样的问题&#xff0c;比如&#xff1a;大语言模型和生成式AI有什么关系呢&#xff1f;大语言模型为什么这么火&#xf…

基于STC12C5A60S2系列1T 8051单片机的模数芯片ADC0832实现模数转换应用

基于STC12C5A60S2系列1T 8051单片的模数芯片ADC0832实现模数转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍模数芯片ADC0832介绍通过模数芯片ADC0832把电压模…

AD教程 (十八)导入常见报错解决办法(unkonw pin及绿色报错等)

AD教程 &#xff08;十八&#xff09;导入常见报错解决办法&#xff08;unkonw pin及绿色报错等&#xff09; 常见报错解决办法 绿色报错 可以先按TM&#xff0c;复位错位标识绿色报错原因一般是由于规则冲突的原因&#xff0c;和规则冲突就会报错 点击工具&#xff0c;设计…

CSS-列表属性篇

列表相关的属性&#xff0c;可以作用在 ul、ol、li 元素上 属性名&#xff1a;list-style-type功能&#xff1a;设置列表符号常用值如下&#xff1a; 1.none&#xff1a;不显示前面的标识&#xff08;很常用&#xff01;&#xff09; 2.square&#xff1a;实心方块 3.disc&…