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. uni-app封装网络请求promise

    在项目的根目录下,创建http文件夹. 然后在创建request.js文件 文件代码如下 export function apiapi(myurl,myget,mydata,tou="Acc ...

  2. not in 和 not exists 比较和用法

    尽量不要使用not in(它会调用子查询),而尽量使用not exists(它会调用关联子查询).查询语句使用了not in,那么对内外表都进行全表扫描,没有用到索引:而not exists的子查询依 ...

  3. CompletableFuture 超时功能有大坑!使用不当直接生产事故!

    CompletableFuture 超时功能有大坑!使用不当直接生产事故! 本文未经允许禁止转载! 上一篇文章<如何实现超时功能(以CompletableFuture为例)>中我们讨论了 ...

  4. 从整理扑克牌到字母异位词分组:一道巧妙的排序应用题 |LeetCode 49 字母异位词分组

    LeetCode 49 字母异位词分组 点此看全部题解 LeetCode必刷100题:一份来自面试官的算法地图(题解持续更新中) 生活中的算法 你有没有玩过扑克牌?打完一局之后,我们通常会把散落的牌收 ...

  5. 解决Git拉取出现“bad config line 1 in file C:\Users\quber/.gitconfig”的错误

    1.问题描述 我们在拉取Git项目的时候,突然出现如下图所示的错误提示: 2.解决办法 定位到.gitconfig文件,然后将其删除掉: 然后在项目文件夹中点击鼠标右键,选择Git Bash Here ...

  6. Linux安装Kafka(依赖zookeeper)

    一.版本 kafka:kafka_2.12-2.4.0 zk:zookeeper-3.4.14 二.单机版安装 修改 server.properties ,支持外网访问 [1]创建日志文件夹: mkd ...

  7. linux命令行连接wifi

    linux命令行连接wifi 1.安装nmcli sudo apt-get install nmcli 2.查看网络设备 sudo nmcli dev 3.开启wifi sudo nmcli r wi ...

  8. 文件快递柜FileCoxBox-匿名口令分享文本,文件,像拿快递一样取文件

    FileCoxBox特色 轻量简洁:Fastapi+Sqlite3+Vue2+ElementUI 轻松上传:复制粘贴,拖拽选择 多种类型:文本,文件 防止爆破:错误次数限制 防止滥用:IP限制上传次数 ...

  9. AWS - [01] 概述

    题记部分 001 || 概述   AWS,全称Amazon Web Services,是亚马逊公司旗下的云计算服务平台,自2006年起向全球用户提供广泛而深入的云计算服务.AWD是全球最全面.应用最广 ...

  10. TVbox蜂蜜影视_v3.1.6:智能电视观影新选择,简洁界面与强大功能兼具

    蜂蜜影视是一款基于猫影视开源项目 CatVodTVJarLoader 开发的智能电视软件,专为追求简洁与高效观影体验的用户设计.该软件从零开始编写,界面清爽,操作流畅,特别适合在智能电视上使用.其最大 ...