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

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

在工作中有很多场景需要针对广告、商品、信息推广等进行一个排序,或者对展示的顺序做出调整,方便放用户第一眼看到自己感兴趣的信息,因此避免不了需要用到排序的插件,这里以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官网 但…...

Linux 中的 grep 命令

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

阶段五-Day03-Ajax

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

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

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

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…...

【Node.js】NPM 和 package.json

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

周总结【java项目】

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

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

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

【MySQL】表的基础增删改查

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

第11章 Redis(二)

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

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…...

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

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

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

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

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

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

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;请通过以…...

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

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

[MongoDB]-权限验证管理

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

bootstrapjs开发环境搭建

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

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

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

ubuntu 23.04安装中文输入法

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

零基础玩转AutoGLM-Phone-9B:图文语音多模态AI,5分钟快速部署指南

零基础玩转AutoGLM-Phone-9B&#xff1a;图文语音多模态AI&#xff0c;5分钟快速部署指南 1. AutoGLM-Phone-9B简介 1.1 什么是AutoGLM-Phone-9B AutoGLM-Phone-9B是一款专为移动设备优化的多模态AI模型&#xff0c;它能同时处理文字、图片和语音三种信息。想象一下&#xf…...

自动驾驶商业化落地:商业模式与法规体系双轮驱动

目录 一、自动驾驶分级与商业逻辑差异 二、商业模式&#xff1a;不同等级的盈利路径 1. L3 乘用车&#xff1a;成本与合规的平衡 2. L4 运营场景&#xff1a;替代人力的正向现金流 3. L5&#xff1a;社会价值驱动&#xff0c;商业仍待探索 三、法规核心难点&#xff1a;责…...

Java程序员终于有自己的AI Agent框架了:Spring AI Alibaba上手实录

Java程序员终于有自己的AI Agent框架了&#xff1a;Spring AI Alibaba上手实录 说实话&#xff0c;作为一个写了多年Java的人&#xff0c;看着Python那边各种AI框架、Agent工具层出不穷&#xff0c;心里是有点酸的。LangChain、AutoGPT、CrewAI…全是Python的天下。Java开发者想…...

Local SDXL-Turbo应用案例:独立开发者构建个人AI绘画SaaS产品的技术栈选型

Local SDXL-Turbo应用案例&#xff1a;独立开发者构建个人AI绘画SaaS产品的技术栈选型 1. 引言&#xff1a;从想法到产品&#xff0c;一个开发者的选择 如果你是一名独立开发者&#xff0c;或者是一个小团队的负责人&#xff0c;想做一个自己的AI绘画工具&#xff0c;你可能会…...

为什么2026年还有企业在用Excel算工资?新工具提升HR工作效率

HR工资系统软件是帮助企业实现薪酬自动化核算、个税申报、社保公积金管理的数字化工具。现代工资系统通常集成考勤、绩效、人事等模块&#xff0c;支持复杂薪酬规则配置&#xff0c;将HR从每月耗时数天的手工算薪中解放出来&#xff0c;准确率提升至99.9%以上。 为什么2026年还…...

隐私优先方案:OpenClaw+Qwen3-14B镜像处理敏感数据的5层防护

隐私优先方案&#xff1a;OpenClawQwen3-14B镜像处理敏感数据的5层防护 1. 为什么需要本地化隐私方案 去年处理一批客户调研数据时&#xff0c;我犯过一个致命错误——把包含联系方式的原始表格上传到某公有云AI平台进行清洗。三天后&#xff0c;公司邮箱突然收到匿名勒索邮件…...

嵌入式开发语言选择:C与C++的实战对比

1. 嵌入式开发语言选择的核心考量在嵌入式系统开发领域&#xff0c;C和C的争论已经持续了数十年。作为一名在工业控制和消费电子领域工作多年的嵌入式工程师&#xff0c;我见证了从8位单片机到多核处理器的演进过程。选择开发语言绝非简单的技术偏好问题&#xff0c;而是需要综…...

STM32首次烧录选择erase sectors导致程序跑飞

一、故障现象小批量打样回来的板子&#xff0c;烧录程序后一切正常&#xff0c;蜂鸣器响0.5s&#xff0c;LED闪烁等待握手&#xff1b;但是断电重启后蜂鸣器长鸣&#xff0c;LED不闪烁&#xff0c;无法正常运行。二、分析解决过程首先我看了一下电源&#xff0c;电压、电流都是…...

MentorBit红外驱动库:裸机与RTOS下的精准时序控制

1. MentorBit-DetectorIR 库概述MentorBit-DetectorIR 是一款专为 MentorBit 红外发射/接收模块设计的嵌入式底层驱动库&#xff0c;其核心定位并非通用红外协议栈&#xff08;如 NEC、RC5 解码&#xff09;&#xff0c;而是面向硬件验证、模块级功能测试与快速原型开发的轻量级…...

MCP + A2A:正在重塑 AI 世界的两个关键协议

MCP A2A&#xff1a;正在重塑 AI 世界的两个关键协议 2026年&#xff0c;AI 智能体&#xff08;Agent&#xff09;的竞争已经从"谁的模型更强"&#xff0c;转向了"谁的智能体更能协作"。而支撑这场协作革命的底层基础设施&#xff0c;正是两个看似低调却极…...