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=2022
              console.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>

这部分区域可以鼠标拖拽左右滚动文章来源地址https://www.toymoban.com/news/detail-772463.html

到了这里，关于vue实现鼠标拖拽div左右移动的功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！