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

vuedraggable影响点击事件的解决办法

news 2026/4/3 9:20:58

在工作中有很多场景需要针对广告、商品、信息推广等进行一个排序,或者对展示的顺序做出调整,方便放用户第一眼看到自己感兴趣的信息,因此避免不了需要用到排序的插件,这里以vue为例子,采用的插件是vuedraggable,这个插件针对于排序的功能相对完善,官网地址:vuedraggable官网
但是在移动端使用的时候经常会对排序的某些项进行编辑,这个时候针对编辑或者删除等操作点击事件会和拖拽事件造成冲突.
解决办法如下:
把需要拖拽的类名加入到handle属性 并且编辑和操作的class类名不要包含进去就可以了

<vuedraggable class="wrapper" v-model="list" :disabled="disabled" aghost-class="ghost" :handle="'.textI'"><transition-group><div v-for="item in list" :key="item" class="item"><img class="imgPic" @click.stop="delItem" src="../assets/del.png" alt=""><p class="textI">{{item}}</p ></div></transition-group></vuedraggable>

这样就可以解决了

相关文章：

vuedraggable影响点击事件的解决办法

在工作中有很多场景需要针对广告、商品、信息推广等进行一个排序,或者对展示的顺序做出调整,方便放用户第一眼看到自己感兴趣的信息,因此避免不了需要用到排序的插件,这里以vue为例子,采用的插件是vuedraggable,这个插件针对于排序的功能相对完善,官网地址:vuedraggable官网 但…...

编程日记 2023/10/9 22:36:12

Linux 中的 grep 命令

Linux 中的 grep 命令是一个强大的文本搜索工具&#xff0c;它允许用户在文件中查找指定的文本模式&#xff0c;并将匹配的行打印出来。grep 是“Global Regular Expression Print”的缩写&#xff0c;它使用正则表达式来进行文本搜索&#xff0c;因此具有强大的灵活性和功能。…...

编程日记 2023/10/9 22:34:10

阶段五-Day03-Ajax

一、JavaWeb中路径的说明 1. JavaWeb中的路径 在JavaWeb中, 路径分为相对路劲和绝对路径两种: 相对路径: ./ 表示当前目录 ../ 表示当前文件所在目录的上一级目录 绝对路径: 完整的路径名 2. 在JavaWeb中/的不同意义 /斜杠如果被浏览器解析,得到的是 协议本地ip端口号…...

编程日记 2023/10/9 22:33:09

EPOLL单线程版本 基于reactor 的 httpserver文件下载 支持多个客户端同时处理

之前写了一个httpserver的问价下载服务器 如果有多个客户端请求过来只能串行处理必须得等当前的操作完成之后才会处理 另外还存在 文件大的时候 会出错 处理不了 原因就是 sendfile是在一个while循环中处理的 当调用send失败返回-1之后 就 结束了 而一般来讲 se…...

编程日记 2023/10/9 22:32:08

uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装。 <template><view class"diygw-modal basic" v-if"showPrivacy" :class"showPrivacy?show:" style"z-index: 1000000"><view class"diygw-dialog diygw-dialog-modal bas…...

编程日记 2023/10/9 22:31:07

【Node.js】NPM 和 package.json

NPM npm 是 Node.js 的包管理工具&#xff0c;基于命令行&#xff0c;用于安装、升级、移除、管理依赖项。 常用命令&#xff1a; npm init&#xff1a;初始化一个新的 npm 项目&#xff0c;创建 package.json 文件。&#xff08;括号里为默认值&#xff09; description&am…...

编程日记 2023/10/9 22:28:04

周总结【java项目】

项目进度&#xff1a; 学习了JavaFX&#xff0c;下载了sceneBuilder辅助工具构建窗口&#xff08;目前建立了登陆&#xff0c;注册&#xff0c;忘记密码的界面&#xff09;&#xff0c;然后是学习了MySQL的连接&#xff0c;现在的项目是刚连上数据库&#xff1b; 下一步&…...

编程日记 2023/10/9 22:27:02

《深度不确定条件下的决策：从理论到实践》PDF

制定未来计划时需要预测变化&#xff0c;尤其是制定长期计划或针对罕见事件的计划时。当这些变化存在高度不确定性的时候&#xff0c;这种预期就变得越来越困难。 今天给大家介绍的这本《深度不确定条件下的决策&#xff1a;从理论到实践》正是解决以上问题的良方。完整书籍文…...

编程日记 2023/10/9 22:26:00

【MySQL】表的基础增删改查

前面我们已经知道怎么来创建表了&#xff0c;接下来就来对创建的表进行一些基本操作。 这里先将上次创建的表删除掉&#xff1a; mysql> use test; Database changedmysql> show tables; ---------------- | Tables_in_test | ---------------- | student | -----…...

编程日记 2023/10/9 22:25:00

第11章 Redis（二）

11.11 Redis 哨兵机制和集群有什么区别 难度：★★★ 重点：★★ 白话解析 前面的题目都是Redis的原理，接下来就是实际使用的问题了，首先Redis为了保证高可用，在微服务场景下必须是部署集群的，而Redis的集群部署通常就两种方式：主从和Redis Cluster。 参考答案 1、主从…...

编程日记 2023/10/9 22:23:59

mybatis配置entity下不同文件夹同类型名称的多个类型时启动springboot项目出现TypeException源码分析

记录问题&#xff1a;当配置了 mybatis.type-aliases-packagecom.runjing.erp.entity 配置项时&#xff0c;如果entity文件夹下存在不同子文件夹下的同名类型时&#xff0c;mybatis初始化加载映射时会爆出org.apache.ibatis.type.TypeException&#xff1a; The alias TestDemo…...

编程日记 2023/10/9 22:21:56

淘宝商品评论数据分析接口，淘宝商品评论接口

淘宝商品评论数据分析接口可以通过淘宝开放平台API获取。 通过构建合理的请求URL&#xff0c;可以向淘宝服务器发起HTTP请求&#xff0c;获取商品评论数据。接口返回的数据一般为JSON格式&#xff0c;包含了商品的各种评价信息。 获取到商品评论数据后&#xff0c;可以对其进…...

编程日记 2023/10/9 22:20:55

RK3288 android7.1 修改双屏异触usb tp触摸方向

一&#xff0c;问题描述&#xff1a; android机器要求接两个屏&#xff08;lvdsmipi&#xff09;两个usb tp要实现双屏异触。由于mipi的方向和lvds方向转成一样的了。两个usb tp的方向在异显示的时候也要作用一样。这个时候要根据pid和vid修改触摸上报的数据。usb tp有通用的触…...

编程日记 2023/10/9 22:19:54

软考 系统架构设计师系列知识点之软件架构风格（8）

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之软件架构风格&#xff08;7&#xff09; 这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff0c;11月4号就要考试&#xff0c;因此…...

编程日记 2023/10/9 22:18:53

ubuntu安装ssh

安装 OpenSSH 服务器&#xff08;如果尚未安装&#xff09;&#xff1a; apt-get update && apt-get upgrade -y sudo apt-get install -y openssh-server 检查 SSH 服务是否正在运行&#xff1a; sudo service ssh status 如果 SSH 服务未运行&#xff0c;请通过以…...

编程日记 2023/10/9 22:17:52

webpack不同环境下使用CSS分离插件mini-css-extract-plugin

1.背景描述 使用mini-css-extract-plugin插件来打包css文件&#xff08;从css文件中提取css代码到单独的文件中&#xff0c;对css代码进行代码压缩等&#xff09;。 本次采用三个配置文件&#xff1a; 公共配置文件&#xff1a;webpack.common.jsdev开发环境配置文件&#x…...

编程日记 2023/10/9 22:16:51

[MongoDB]-权限验证管理

[MongoDB]-权限验证管理 senge | 2023年9月 背景说明&#xff1a;现有两套MongoDB副本集群给开发人员使用时未开启认证。 产生影响&#xff1a;用户若输入账号以及密码则会进行校验&#xff0c;但用户可以在不输入用户名和密码的情况下也可直接登录。 倘若黑客借此进行攻击勒索…...

编程日记 2023/10/9 22:15:50

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架&#xff0c;其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集&#xff0c;本文主要描述bootstrapjs的开发环境搭建。 如上所示&#xff0c;使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test…...

编程日记 2023/10/9 22:13:48

远程实时监控管理：5G物联网技术助力配电站管理

配电站远程监控管理系统是基于物联网和大数据处理等技术的一种创新解决方案。该系统通过实时监测和巡检配电场所设备的状态、环境情况、安防情况以及火灾消防等信息&#xff0c;实现对配电站的在线实时监控与现场设备数据采集。 配电站远程监控管理系统通过回传数据进行数据系…...

编程日记 2023/10/9 22:12:47

ubuntu 23.04安装中文输入法

使用ubuntu 23.04安装中文输入法&#xff0c;尝试了最新的搜狗&#xff0c;谷歌拼音&#xff0c;fcitx的原始拼音&#xff0c;最终的结果就是使用了谷歌拼音。 搜狗输入法&#xff1a;好用&#xff0c;但是用了没几天发现各种闪退&#xff0c;一打开就闪烁&#xff0c;根本无法…...

编程日记 2023/10/9 22:11:46

盟接之桥®：当新ERP撞上“紧急接入”，WebEDI如何成为制造业的“救命稻草”？

在制造业的数字化征途中&#xff0c;最令人焦虑的场景之一莫过于&#xff1a;“下游客户&#xff08;如汽车主机厂&#xff09;明天就要看EDI对接数据&#xff0c;而你们的全新ERP系统&#xff0c;还在测试环境里试运行。”这绝非危言耸听。在汽车供应链、高端装备制造等领域&a…...

编程新知 2026/4/3 9:10:02

开源大模型新范式：Pixel Epic智识终端镜像免配置部署详细步骤

开源大模型新范式&#xff1a;Pixel Epic智识终端镜像免配置部署详细步骤 1. 产品概览 Pixel Epic智识终端是一款基于AgentCPM-Report大模型构建的创新研究报告辅助工具。它将枯燥的科研工作转化为一场像素风格的RPG冒险&#xff0c;让用户以游戏化的方式完成专业报告撰写。 …...

编程新知 2026/4/3 9:04:01

intv_ai_mk11开源镜像深度解析：为何选择Llama架构+7B规模+Q4量化黄金组合

intv_ai_mk11开源镜像深度解析&#xff1a;为何选择Llama架构7B规模Q4量化黄金组合 1. 为什么选择Llama架构7B规模Q4量化组合 在构建AI对话机器人时&#xff0c;模型架构、参数规模和量化方式的选择直接影响最终效果和部署成本。intv_ai_mk11采用的Llama架构7B参数Q4量化组合…...

编程新知 2026/4/3 6:53:56

文脉定序保姆级教程：3步完成BGE-Reranker-v2-m3镜像免配置部署

文脉定序保姆级教程&#xff1a;3步完成BGE-Reranker-v2-m3镜像免配置部署 你是否遇到过这样的烦恼&#xff1f;用自己搭建的知识库或者搜索引擎提问&#xff0c;系统确实返回了一大堆结果&#xff0c;但最相关、最准确的答案却淹没在列表的中间甚至末尾。传统的检索方法&…...

编程新知 2026/4/3 6:47:53

SpringBoot+Vue IT交流和分享平台平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

系统架构设计### 摘要 随着信息技术的快速发展&#xff0c;互联网已成为人们获取和分享知识的重要渠道。尤其是在IT领域&#xff0c;技术人员和爱好者需要一个高效、便捷的交流平台来分享经验、讨论技术问题并获取最新行业动态。传统的论坛和社交媒体平台虽然功能丰富&#xff…...

编程新知 2026/4/3 6:27:36

Net/Net Core微信公众号上传图片永久图片素材和内容中图片素材不能用MultipartFormDataContent的坑

测试了N次&#xff0c;不能用net自带的 MultipartFormDataContent&#xff0c;否则微信公众号会一直报错41005错误&#xff0c;具体原因不详&#xff0c;只能拼装head字符串实现&#xff0c;下面是封装好的上传永久素材和临时图片素材的方法&#xff0c;下面为测试好的代码&…...

编程新知 2026/4/3 5:59:01

开源CLAP音频分类实战案例：上传MP3/WAV即得语义标签

开源CLAP音频分类实战案例&#xff1a;上传MP3/WAV即得语义标签 1. 项目概述 今天给大家介绍一个特别实用的AI工具——CLAP音频分类服务。这是一个基于LAION CLAP模型的开源项目&#xff0c;能够让你上传任何音频文件&#xff0c;就能自动识别出里面的内容是什么。 简单来说…...

编程新知 2026/4/3 4:55:56

LibEdificio嵌入式教学库：硬件映射驱动与楼宇灯光实验平台

1. 项目概述LibEdificio 是一款面向嵌入式教育平台的专用控制库&#xff0c;专为“Building Lights 教学系统”&#xff08;楼宇灯光教学实验平台&#xff09;设计。该系统并非通用工业楼宇自控设备&#xff0c;而是一套结构化、模块化、可编程的硬件教学套件&#xff0c;广泛应…...

编程新知 2026/4/3 4:15:25

Pixel Aurora Engine镜像部署：支持RTX 3060及以上显卡的轻量级方案

Pixel Aurora Engine镜像部署&#xff1a;支持RTX 3060及以上显卡的轻量级方案 1. 项目概览 Pixel Aurora Engine是一款专为像素艺术创作设计的AI绘图工作站&#xff0c;采用复古8-bit游戏风格界面&#xff0c;让AI艺术创作变得像玩游戏一样有趣。这个轻量级解决方案特别针对…...

编程新知 2026/4/3 3:51:06

rk3576（5）之设备树下GPIO驱动

1、简介rk3576buildroot设备树GPIO驱动编写。个人理解设备树就相当于存在统一规则、统一管理的头文件&#xff0c;记录了开发板的设备信息。2、设备树语法2.1、dtsi 头文件设备树也支持头文件&#xff0c;设备树的头文件扩展名为.dtsi设备树文件不仅可以应用 C 语言里面的.h 头…...

编程新知 2026/4/3 3:16:42