使用鼠标拖拽div，实现横向滚动

最新推荐文章于 2024-07-31 16:50:40 发布

ROVAST

最新推荐文章于 2024-07-31 16:50:40 发布

阅读量1.2w

点赞数 13

分类专栏： web前端Jquery/Js/Html/Css 文章标签： html

本文链接：https://blog.csdn.net/rovast/article/details/79872111

版权

本文介绍了如何通过HTML和JavaScript实现一个div元素，当鼠标拖拽时能够实现横向滚动的效果，提供了一种增强用户体验的方法。

摘要由CSDN通过智能技术生成

效果
效果示例

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ROVAST

关注关注

13
点赞
踩
15

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue拖动改变模板_vue实现div拖拽互换位置

weixin_39538693的博客

12-23

394

本文实例为大家分享了vue实现div拖拽互换位置的具体代码，供大家参考，具体内容如下template模板draggable="true"@dragstart="handledragstart($event, item)"@dragover.prevent="handledragover($event, item)"@dragenter="handledragenter($event, item)"...

DIV+CSS+JS不间断横向滚动实现代码

10-27

不间断横向滚动想必大家在很多场合都有见过吧，本文也使用DIV+CSS+JS实现一个，感兴趣的你可以参考下哈，希望对你学习有所帮助

6 条评论您还未登录，请先登录后发表或查看评论

鼠标横向滚动条和鼠标滚动方向

热门推荐

超人不会飞

07-20

1万+

以下代码项目中直接使用即可，此种方法是通过鼠标拖拽进行滚动，滑动滚轮无效果。当然快捷键，shift+鼠标滚轮可以控制横向滚动，对用户来说体验不友好。

vue hot true 不起作用_Vue + Flask 小知识（二）

weixin_39783512的博客

12-03

357

鼠标横向拖动div

weixin_46990364的博客

12-05

439

【代码】鼠标横向拖动div。

实现div鼠标拖动效果

xiazeqiang2018的博客

08-04

3238

本例是在vue中实现的拖动功能，但是基本思想是一样的。主要是根据mousedown、mousemove、mouseup三个事件，结合元素的offsetLeft和el.style.left属性实现。顺便记录一下两者的区别： 1. offsetLeft总的来说是获取当前元素距父元素左侧的值，具体分两种情况：如果当前元素仍在普通流中（即position值为static或者relative），...

React + TS 中实现鼠标水平拖动，横向滚动 | Mouse click and Drag Instead of Horizontal Scroll bar

超逸の学习技术博客

11-15

1938

背景最近接到一个新需求，就是有一个流程的东西，而这个流程可能会比较多，那么在水平就需要 scroll-x，表面上使用触摸板双指即可拖动，但是产品和测试讨论之后觉得鼠标也需要拖拽滑动。但鼠标可以通过点击滚动条即可滑动，那么，既然需求砍不掉，那就试着做一做。具体任务也很明确了，就是希望鼠标在流程中可支持拖动。寻找答案在网上找了许多的资料，实在是太多重复而无用的内容了，不过功夫不负有心人，找到了几篇有用的资料，如下： Mouse click and Drag Instead of Horizontal

支持移动端的jQuery滑动条拖动横向图片滚动特效

01-02

在图片的展示上，可以使用CSS的`display: inline-block`或者`float: left`属性来使图片并排显示，从而实现横向滚动的效果。记得在图片的`width`属性上设置合适的值，确保它们可以在有限的空间内水平排列。最后，...

写一个使用vue的指令v-drag来实现鼠标拖拽，再结合css的transform属性实现横向滚动效果

04-08

关于使用vue的指令v-drag来实现鼠标拖拽再结合css的transform属性实现横向滚动效果，你可以参考以下代码示例： ```html <div class="scroll-container" v-drag> <div class="scroll-content"> <!-- 这里放置...

写一个使用vue的指令v-drag来实现鼠标拖拽，再结合css的transform属性实现横向滚动效果的代码

04-08

好的，以下是使用vue指令v-drag实现鼠标拖拽，结合css transform属性实现横向滚动效果的代码： ```html <div class="scroll-wrapper" v-drag="{ axis: 'x', dragStart: handleDragStart, dragEnd: handleDragEnd ...

div横向滑动

苏木瑾

12-02

1035

Vue3 el-table支持鼠标横向拖拽滚动

qq_41038412的博客

05-28

442

【代码】Vue3 el-table支持鼠标横向拖拽滚动。

鼠标拖拽实现

qq_41915936的博客

07-08

245

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

2020-11-22

qq_21681391的博客

11-22

244

Vue-div横向/纵向拖拽缩放 1.效果图： 2.Html部分 vue页面文件中 <template> <div class="Drag2"> <div class="box" ref="box" > <div class="left">  </div> <div class.

vue横向滚动

weixin_57564706的博客

06-20

587

开发过程中可能会碰到这样的情况，比如一张特别长的图在不被压缩的情况下屏库视口放不下就会出现横向滚动条，但是有些用户不清楚需要按下Shift加滚轮可以进行横向滚动，就只能按着滚动条进行拖动，这样对于用户体验不是很好。所以，就需要鼠标滚动来进行横向滚动，首先大家可以想到模拟键盘事件比如鼠标移入后模拟按下shift。但是浏览器是不允许js模拟按下Shift，所以我用到了监听滚动事件进行设置滚动方向以及距离。这里我使用的是vue的自定义属性通过监听这个元素的滚动事件在每次滚动时候横向滚动25px。