let level_cards
// 标记可移动
, move_start
// 移动初始的x位置
, move_x
// 移动初始的容器偏移量
, move_scroll_left
// 判断是否为移动, 是则取消原来的点击
, moved startMove(e) {
// console.log(e)
move_start = true
move_x = e.clientX
move_scroll_left = level_cards.scrollLeft
},
move(e) {
if(move_start) {
// 位移大于10像素认为是移动
if(move_x - e.clientX > 10) {
moved = true
}
level_cards.scrollLeft = move_scroll_left + move_x - e.clientX
}
},
endMove(e) {
e.stopPropagation()
move_start = false
},

Vue横向滚动鼠标控制的更多相关文章

  1. VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动

    本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...

  2. VSCode——滚动鼠标控制字体大小

    第一步:找到设置 文件-->首选项-->设置 第二步:打开settings.json文件 第三步:在settings.json文件中添加 "editor.mouseWheelZo ...

  3. flash滑杆控制图片横向滚动

    flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html

  4. Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  5. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  6. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  7. [Python Study Notes]实现对鼠标控制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  8. 使 WPF 支持触摸板的横向滚动

    微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...

  9. [Python Study Notes]pynput实现对鼠标控制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  10. html5 tab横向滚动,无滚动条(transform:translate)

    html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处 ...

随机推荐

  1. dart中所有的循环详解

    List MyList = ['苹果', '栗子', '小苹果']; for (var i = 0; i < MyList.length; i++) { print(MyList[i]); } ...

  2. 探索AI,拥抱未来,欢迎加入魔乐世界!

    近日,2024开放原子开源生态大会在北京亦庄开幕,大会以"开源赋能产业,生态共筑未来"为主题,来自政府.企业.学术界.研究机构的专家学者汇聚一堂,共同探讨开源在人工智能领域的创新应 ...

  3. 构建强大算力基础,奠定AI时代基石!

    7月6日,2023世界人工智能大会在上海拉开序幕.由中国电信主办的"算网一体 融创未来"主题论坛也于当日在上海世博中心举行.上海市经济和信息化委员会副主任戎之勤.上海市金山区人民政 ...

  4. Ubuntu手动安装Mysql包

    ubuntu通过tar包安装mysql5.7.21 1.下载解压命令见下: wget https://dev.mysql.com//Downloads/MySQL-5.7/mysql-5.7.21-l ...

  5. 更换Linux系统镜像源

    更换Linux系统镜像源 切换镜像源通常是为了提高软件包下载的速度和稳定性.以下是CentOS 7切换镜像源的一般步骤: 一.安装wget(如果尚未安装) 首先,需要确保系统中安装了wget工具,因为 ...

  6. 从SSH远程到Git Push:在Windows上一步到位实现免密码登录

    前言 我一直希望在Windows上能像在Linux系统中那样,通过SSH密钥实现免密码远程连接.每次远程连接到服务器时,手动输入密码既麻烦又不太安全,尤其是在我需要频繁操作的情况下. 之前的文章中已经 ...

  7. 基于iscsi存储池

    命令行 [root@kvm1 ~]# virsh pool-define-as --name stor2 --type iscsi \ > --source-host 192.168.114.1 ...

  8. 解决Webstorm Nodejs console.log("这是中文") 控制台乱码

    设置文件编码 自定义vm选项文件 添加 文件最后一行添加 -Dfile.encoding=UTF-8 3.修改注册表 Windows+R --> regedit --> 计算机\HKEY_ ...

  9. FreeModbus源码详解(转)

    学习转载原文链接: https://blog.csdn.net/golf_research/article/details/52240739 https://blog.csdn.net/u014748 ...

  10. 针对N=p^rq分解之初探

    针对N=p^r*q分解之初探 论文地址:https://eprint.iacr.org/2015/399.pdf 题目:https://www.nssctf.cn/problem/2016 from ...