【HTML】按住div块水平滑动

bindEventListener () {
      let _this = this
      this.menuId = document.querySelector('#navigation-menu-id')
      this.startX = 0
      // 上一次的位置 scrollLeft
      this.lastLeft = 0
      this.menuId.onmousedown = function (e) {
        _this.menuId.onmousemove = _this.onMouseMove
        _this.menuId.onmouseup = _this.onMouseUp
        e = e || window.event
        // 如果上次有记录
        if (_this.lastLeft > 0) {
          // 减掉上次的距离
          _this.startX = e.clientX - _this.lastLeft
        } else {
          _this.startX = e.clientX - _this.menuId.scrollLeft
          _this.startX = e.clientX
        }
      }
    },

    onMouseMove (e) {
      e = e || window.event
      this.lastLeft = e.clientX - this.startX
      // overflow-x: auto
      this.menuId.scrollLeft = -(e.clientX - this.startX)
    },
    onMouseUp () {
      this.menuId.onmouseup = this.menuId.onmousemove = null
    },

<ul class="navigation-left-menu" id="navigation-menu-id">
          <template v-for="(item, index) in navigationMenuList">
            <li :key="index" :class="{ active: index === navigationMenuIndex }">
              {{item.name}}
              <p class="menu-selected-line"></p>
            </li>
          </template>
        </ul>

 

.navigation-left-menu {
          display: flex;
          align-items: center;
          background-color: white;
          overflow-x: auto;
          overflow-y: hidden;
          height: 40px;
          width:100%;
          padding: 0 16px;
          cursor: move;
          li {
            color: #333333;
            font-size: 14px;
            margin-right: 35px;
            flex-shrink: 0;
            white-space: nowrap;
            cursor: pointer;
            /*设置文字无法选中*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }
          li:last-child {
            margin-right: 0;
          }
          li.active {
            color: #F85822;
            font-weight: 600;
            position: relative;
            .menu-selected-line {
              position: absolute;
              height: 2px;
              width: 90%;
              bottom: -10px;
              background-color: #F85822;
            }
          }
        }
        .navigation-left-menu::-webkit-scrollbar {
          display: none;
        }
}