vue实现鼠标拖拽div左右移动的功能

直接代码：

<template><div class="demo"><div class="third-part" id="发展历程"><div class="title">发展历程</div><div class="content" id="nav" v-if="dataList&&dataList.length>0"><div class="item" v-for="(item,index) in dataList" :key="index"><div>{{ item.month }}</div><div>{{ item.content }}</div></div></div><div class="year"><span :class="{'active': active==item}" @click="active=item" v-for="(item,index) in yearList" :key="index">{{ item }}</span></div></div></div>
</template><script>export default {data() {return {dataList: [{ month: "2月",content: "先后通过CMMI3级、ISO9000、ITSS3级等多项国际、国家级认证。"},{ month: "5月",content: "先后通过CMMI3级、ISO9000、ITSS3级等多项国际、国家级认证。"},{ month: "7月",content: "先后通过CMMI3级、ISO9000、ITSS3级等多项国际、国家级认证。"},{ month: "9月",content: "先后通过CMMI3级、ISO9000、ITSS3级等多项国际、国家级认证。"} //后期内容问UI],active: 2023,yearList:['2023','2022','2021','2020']}},mounted(){this.$nextTick(()=> {this.scrollInit()})},methods: {scrollInit() {// 获取要绑定事件的元素const nav = document.getElementById("nav")var flag; // 鼠标按下var downX; // 鼠标点击的x下标var scrollLeft; // 当前元素滚动条的偏移量nav.addEventListener("mousedown", function (event) {console.log("触发mousedown");flag = true;downX = event.clientX; // 获取到点击的x下标scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量});nav.addEventListener("mousemove", function (event) {if (flag) { // 判断是否是鼠标按下滚动元素区域var moveX = event.clientX; // 获取移动的x轴var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离console.log(scrollX)//当滑动到400位置时让2022样式变化等等if(scrollLeft == 400 ){that.active=2022console.log("到400了");}else if(scrollLeft == 600){console.log("到600了");}}});// 鼠标抬起停止拖动nav.addEventListener("mouseup", function () {flag = false;});// 鼠标离开元素停止拖动nav.addEventListener("mouseleave", function (event) {flag = false;});},},}
</script><style lang="scss" scoped>
.demo {user-select: none;width: 1920px;
}.third-part {width: 100%;height: 800px;background-image: url('../assets/img/about/aboutusbg3.png');background-size: 100% 100%;padding-top: 100px;box-sizing: border-box;.title {height: 60px;font-size: 48px;font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 2.0-800;line-height: 60px;color: #fff;}.content {margin-left: 300px;margin-top: 100px;width: 1469px;height: 235px;overflow-x: auto;// box-sizing: border-box;white-space: nowrap;&::-webkit-scrollbar {width: 0px;height: 0px;}.item {width: 403px;height: 230px;text-align: left;margin-right: 130px;display: inline-block;white-space: wrap;div:nth-child(1){height: 89px;font-size: 60px;font-family: Anton, Anton-400;color: #fff;line-height: 60px;border-left: 3px solid #fff;padding-left: 37px;}div:nth-child(2){height: 141px;width: 365px;font-size: 28px;font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 2.0-400;color: #ffffff;line-height: 50px;padding-left: 37px;border-left: 1px solid #fff;}}}.year {width: 1700px;height: 116px;margin-top: 114px;text-align: left;padding-left: 450px;span {display: inline-block;width: 200px;height: 100%;border-bottom: 1px solid #fff;font-size: 50px;font-family: Anton, Anton-400;color: #bebef6;line-height: 70px;padding: 30px 0;text-align: center;box-sizing: border-box;}span:hover {font-size: 70px;vertical-align: top;border-bottom: 4px solid #722ed1;}.active {font-size: 70px;vertical-align: top;border-bottom: 4px solid #722ed1;}}}
</style>

这部分区域可以鼠标拖拽左右滚动