首页 前端知识 vuedraggable拖拽列表设置某一条元素禁止被拖拽

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

2024-08-08 23:08:41 前端知识 前端哥 483 272 我要收藏

直接上代码

<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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15099.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!