当前位置: 首页 > news >正文

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

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

这里眨眼睛分享一种可定制可拖拽状态的方法供小友参考

在这里插入图片描述

解决方法:

1. 绑定移动事件

在这里插入图片描述

2. 处理移动世界并对对应情况返回false

//移动事件
const onMoveEvnet = (event) => {//被拖拽的元素const draggedElement = event.dragged;//目标被替换的元素const targetElement = event.related;if (targetElement.classList.contains('no-drag') || draggedElement.classList.contains('no-drag')) {// 阻止拖拽return false;}
};

3. 为不需要拖拽及替换的子元素加上设类名no-drag

小友可以根据自身所需情况进行修改,以实现所需的效果

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • JS中【querySelectorAll】详解
  • 【Node】【7】函数
  • 8.28-回顾+容器与主机之间的通信+跨主机容器之间的通信
  • NTP简介及相关概念
  • mysql创建存储过程
  • 音频PCM的能量dB计算
  • iOS巨魔商店免越狱作弊解决方案
  • Redis: 用于纯缓存模式需要注意的地方
  • zoom 会议 javascript 转录例子
  • Unity 贴图拷贝与性能对比
  • Python中的`while`循环:探索无限可能
  • 《深入理解 C++虚函数:开启多态之门的关键》
  • 双登集团IPO:铅酸电池业务仍为重心,暴露了成长天花板?
  • AD7606芯片驱动-FPGA实现
  • 打卡50天------图论
  • 【跃迁之路】【735天】程序员高效学习方法论探索系列(实验阶段492-2019.2.25)...
  • 002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
  • ES6简单总结(搭配简单的讲解和小案例)
  • Flex布局到底解决了什么问题
  • github指令
  • Joomla 2.x, 3.x useful code cheatsheet
  • Odoo domain写法及运用
  • pdf文件如何在线转换为jpg图片
  • python学习笔记 - ThreadLocal
  • ReactNative开发常用的三方模块
  • scala基础语法(二)
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • Vue2.0 实现互斥
  • 大快搜索数据爬虫技术实例安装教学篇
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 前端_面试
  • 悄悄地说一个bug
  • 如何借助 NoSQL 提高 JPA 应用性能
  • 一些关于Rust在2019年的思考
  • ​TypeScript都不会用,也敢说会前端?
  • #Linux(Source Insight安装及工程建立)
  • #Linux(帮助手册)
  • #pragma once与条件编译
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (13):Silverlight 2 数据与通信之WebRequest
  • (3)nginx 配置(nginx.conf)
  • (CPU/GPU)粒子继承贴图颜色发射
  • (windows2012共享文件夹和防火墙设置
  • (八)光盘的挂载与解挂、挂载CentOS镜像、rpm安装软件详细学习笔记
  • (九十四)函数和二维数组
  • (四)Linux Shell编程——输入输出重定向
  • (转)用.Net的File控件上传文件的解决方案
  • (转载)(官方)UE4--图像编程----着色器开发
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • ..回顾17,展望18
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .net 中viewstate的原理和使用
  • .Net多线程Threading相关详解
  • .NET关于 跳过SSL中遇到的问题
  • .NET中winform传递参数至Url并获得返回值或文件