vue项目中实现div块在父盒子左右移动

html

<div id="parent" class="kdZ" >
                <div class="hkBox" ref="pondModel">
                    <div id="children" @mousedown="move" ref="sonNode"></div>
                </div>
                <div class="center">
                    <div>{{leftselectValue}}</div>
                    <div>{{leftselectValue+1}}</div>
                </div>
                <div class="bottom">
                    <div :class="[chiziIndex==item? 'active':'']" v-for="(item) in 12" :key="item">{{item}}月</div>
                    <div :class="[chiziIndex==-1? 'active':'']">1月</div>
                </div>
            </div>

css

 .kdZ {
            width: 980px;
            height: 130px;
            margin: 0 auto;
            margin-top: 26.5px;
            background:url(../../assets/images/chiz.png) no-repeat;
            background-size: 100% 100%;
            .hkBox{
                position: relative;
                height: 27px;
                width: 936px;
                // border: 1px solid red;
                // margin: 0 auto;
                margin-top: -2px;
                margin-left: 24px;
                #children {
                position: absolute;
                width: 36px;
                height: 20px;
                background:url(../../assets/images/yidong.png);
                background-size: 100% 100%; 
                cursor: move;

            }
            }
            .center{
                display: flex;
                width: 100%;
                position: relative;
                div{
                    font-family: PingFangSC-Medium;
                    font-size: 22px;
                    color: #ffff;
                    text-align: center;
                    font-weight: 500;
                }
                div:nth-child(1){
                    position: absolute;
                    left: 19px;;
                    top: -10.5px;
                }
                div:nth-child(2){
                    position: absolute;
                    right: 61px;;
                    top: -10.5px;
                }
            }
            .bottom{
                display: flex;
                margin-top: 55px;
                margin-left: 30px;
                div{
                    font-family: PingFangSC-Regular;
                    font-size: 18px;
                    color: #32C5FF;
                    letter-spacing: 0;
                    text-align: center;
                    font-weight: 400;
                    margin-right:42px;
                    white-space: nowrap;
                }
                .active{
                    font-family: PingFangSC-Medium;
                    font-size: 20px;
                    color: #32C5FF;
                    font-weight: 600;
                }
                div:nth-child(11), div:nth-child(12),div:nth-child(13){
                    margin-left: -10px;
                }
            }
        }

js

export default {
    data: () => ({
        leftselectValue: 2021, //左侧下拉菜单选中的
        chiziIndex:1,//尺子日期的索引
        chiziValue:'2021年1月',///尺子日期,默认        
    }),
    methods: {
        // 尺子日期滑动的事件
        move(event){
            let that=this
            let odiv = event.target
            let disX =event.clientX - odiv.offsetLeft
            let disY =event.clientY - odiv.offsetTop
            document.onmousemove=(e)=>{
                //计算元素位置(需要判断临界值)
                let left = e.clientX - disX;
                // let top = e.clientY - disY;
                let {
                    offsetHeight: pondModelHeight,
                    offsetWidth: pondModelWidth,
                } = this.$refs.pondModel;
                let {
                    offsetHeight: sonNodeHeight,
                    offsetWidth: sonNodeWidth,
                } = odiv;
                // 左上角(left)
                if (left <0) {
                    left = 0;
                }
                if (left >=that.getFontSize(851)) {
                    left = that.getFontSize(851);
                }
                if (top < 0) {
                    top = 0;
                }
                // 左下角
                if (top > pondModelHeight - sonNodeHeight) {
                    // top = pondModelHeight - sonNodeHeight-sonNodeHeight/2;
                    top = pondModelHeight - sonNodeHeight;

                    // 正常的是 pondModelHeight - sonNodeHeight 但是我的dom 会超出半个所以我这加了半个距离 没找到原因
                }
                if (left > pondModelWidth - sonNodeWidth) {
                    console.log(123);
                    // left = pondModelWidth - sonNodeWidth-sonNodeWidth/2;
                    left = pondModelWidth - sonNodeWidth

                    // 正常的是 pondModelWidth - sonNodeWidth 但是我的dom 会超出半个所以我这加了半个距离 没找到原因
                }
                odiv.style.left = left +'px'
                odiv.style.top  = top  +'px'
                console.log(left);
                odiv.style.zIndex =999

                // 判断当前指示到了几月份
                if (left<=0 ) {
                   this.chiziIndex=1
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                   console.log(this.chiziValue);
                }
                if (left>0 && left<that.getFontSize(75)) {
                   this.chiziIndex=2
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                   console.log(this.chiziValue);
                }

                if (left>that.getFontSize(75) && left<that.getFontSize(145)) {
                   this.chiziIndex=3
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(145) && left<that.getFontSize(215)) {
                   this.chiziIndex=4
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(215) && left<that.getFontSize(285)) {
                   this.chiziIndex=5
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(285) && left<that.getFontSize(355)) {
                   this.chiziIndex=6
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(355) && left<that.getFontSize(425)) {
                   this.chiziIndex=7
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(425) && left<that.getFontSize(505)) {
                   this.chiziIndex=8
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(505) && left<that.getFontSize(576)) {
                   this.chiziIndex=9
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(576) && left<that.getFontSize(645)) {
                   this.chiziIndex=10
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(645) && left<that.getFontSize(715)) {
                   this.chiziIndex=11
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(715) && left<that.getFontSize(785)) {
                   this.chiziIndex=12
                   this.chiziValue=this.leftselectValue+'年'+this.chiziIndex+"月"
                    console.log(this.chiziValue);
                }
                if (left>that.getFontSize(785)) {
                   this.chiziIndex=-1
                   this.chiziValue=(this.leftselectValue+1)+'年'+(-this.chiziIndex)+"月"
                    console.log(this.chiziValue);
                }
            }
            document.onmouseup=(e)=>{
                document.onmousemove = null
                document.onmouseup = null
                odiv.style.zIndex =1
                odiv = null
            }
    },

    },

}

效果：
​​​​​​​