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

在sortablejs的拖拽排序情况下阻止input拖拽事件

如题

问题

在vue3的elementPlus的table中,通过sortablejs添加了行拖拽功能,但是在行内会有输入框,此时拖拽输入框会触发sortablejs的拖拽功能

解决

基于这个现象,我怀疑是由于拖拽事件未绑定而冒泡到后面的行上从而导致的拖拽事件触发了sortablejs的功能,故尝试阻止事件冒泡

tsx写法:


                <xq-input v-model={scoped.row.xxx}
                          onClick={withModifiers(()=>{},["stop", "prevent"])}
                          draggable={true}
                          onDragstart={withModifiers(()=>{},["stop", "prevent"])}
                >
                </xq-input>

注意这里必须设置draggable为true来绑定drag事件才能阻止冒泡

ts写法


                <xq-input v-model="scoped.row.xxx"
                          @click.stop
                          draggable="true"
                          @dragstart.stop
                >
                </xq-input>

http://www.kler.cn/a/523730.html

相关文章:

  • docker安装Redis:docker离线安装Redis、docker在线安装Redis、Redis镜像下载、Redis配置、Redis命令
  • 【Jave全栈】Java与JavaScript比较
  • 系统思考—心智模式
  • QT+mysql+python 效果:
  • Web 代理、爬行器和爬虫
  • IO进程寒假作业DAY6
  • 解决报错“The layer xxx has never been called and thus has no defined input shape”
  • Vue 3 中的 TypeScript:接口、自定义类型与泛型
  • Android View 的事件分发机制解析
  • JS中的Date()操作与易错点
  • 磁珠的选型以及变压器气隙问题
  • Ubuntu 20.04 Realtek 8852无线网卡驱动
  • 接口技术-第4次作业
  • C/C++中的#define和const的特点与区别
  • Baklib如何重塑内容中台的智能化推荐系统实现个性化服务
  • 《Java核心技术 卷II》日期和时间API的时间线
  • 马尔科夫模型和隐马尔科夫模型区别
  • PostGIS笔记:PostgreSQL中表、键和索引的基础操作
  • 蛇年 | 巳巳如意,生生不息
  • 2025金蛇迎春,和数集团祝您新年快乐,蛇年大吉
  • 【机器学习】自定义数据集 使用pytorch框架实现逻辑回归并保存模型,然后保存模型后再加载模型进行预测
  • Java中ExecutorService接口介绍、应用场景和示例代码
  • 如何运用python爬虫爬取百度贴吧的静态图片?
  • 懂球短视频微信小程序SpringBoot+论文源码调试讲解
  • 06-AD向导自动创建P封装(以STM32-LQFP48格式为例)
  • Linux 基础1