类codepen的实现可拖拽窗口demo

首先说下思想

1. flex或者其他布局方式，实现左右分割布局，主盒子宽度100%，左右布局中包含一个分割条（可在布局容器中，也可以单独定义）
2. 为分隔条绑定鼠标点击事件，为document绑定鼠标移动事件和鼠标放开事件，通过监听鼠标移动事件和上一个状态保存下来的鼠标位置作对比，判断当前鼠标移动方向（往左还是往右）
3. 然后计算当前鼠标位置和鼠标点击位置的距离，来计算左右容器的变化，然后通过dom的方式设置宽度，达到动态拖拽窗口大小的效果

这里只是一个简单的demo，具体的实现codepen的逻辑很复杂，具体的项目可以访问github下载阅读

我就是实现了一下左右拖动的效果，对于边界判断，容器里的内容压缩等都没有做具体的处理，所以测试时内容会出现一定的bug

我的代码：

<template>
    <div class="example">
        <div class="left" id='left1'>
            <!-- <input id="file" class="filepath" @change="changepic(this)" type="file"><br>
            <img src="" id="show" width="200"> -->
        </div>
        <div class="bar"> 
        </div>
        <div class="right">

        </div>
    </div>
</template>
<script>
import $ from 'jquery'

var moving = false;
// var left = document.getElementsByClassName('.left')
// var left = $('.left')

var right 
var bar =$('.bar')
var size  = "width"
var axis = 'clientX'
var minSize = 20
var boxesSize = $('.example')[size]();//盒子总宽
var left 

var moveS = 0
var $doc = $(document);
var info={}

export default {
    mounted: function(){
        window.onload = ()=>{
             left = $(".left")
             right = $('.right')
             console.log(right)
            var bar =$('.bar')
            var size  = "width"
            var axis = 'clientX'
            var minSize = 20
            var boxesSize = $('.example')[size]();//盒子总宽
            console.log(boxesSize)
            var moveS = 0
            var $doc = $(document);
            var info={}
            init(right,left,boxesSize)
        }
    },  
    data :function(){
        return{
            imgsrc:'',
        }
    },
    computed:{
        changeplace: function(){
            
        }
    },
    methods: {
        getelement:function(){
            console.log(document.getElementsByClassName('bar'))
        },
        changepic :function(){
            var reads= new FileReader();
            var f=document.getElementById('file').files[0];
            reads.readAsDataURL(f);
            reads.onload=function (e) {
                document.getElementById('show').src=this.result;
            };
        },
       
    },
}


 var setInfo = function (e) {
        info.startS = e[axis];
        // info.thisS = left[size]();
        // info.thatS = right[size]();
        // info.totalS = info.thisS + info.thatS + 20;//左右区域总宽
        // console.log(info)
    };
var init = function(right ,left,boxesSize){
        console.log(left)
        $(".bar").bind("mousedown",function(e) {
            moving = true;
            moveS = e[axis];
            // console.log(e)
            setInfo(e);//设定初始位置
        })
            
        $doc.bind("mousemove", function (e) {   

                if (!moving) return;
                var moveDir = e[axis] - moveS;//判断移动方向，往左往右
                console.log(e[axis],moveS)
                //获得左右模块的宽度
                // console.log(left)
                var thisSize = left["width"]();
                // console.log(boxesSize,thisSize)
                var thatSize = boxesSize - thisSize - 20;
                // console.log(thisSize,thatSize)
                // setInfo(e)
                //右移动或者下移动
                 var moveDis = (e[axis] - info.startS);
                 console.log(moveDir)
                if (moveDir > 0) {
                    
                    thatSize-=moveDis
                    thisSize+=moveDis
                     console.log('右',boxesSize,thisSize,thatSize,moveDis)
                   
                    // if(thatSize==0)return
                }

                // 左移动或者上移动
                if (moveDir < 0) {
                    thisSize += moveDis
                    thatSize -= moveDis
                    console.log('左',boxesSize,thisSize,thatSize,moveDis)
                }

                // thisIndex = $boxs.index($boxThis);
                // thatIndex = $boxs.index($boxThat);

                //移动的距离
                //  console.log(e[axis],info.startS)
               
                //最大尺寸
                // var maxSize = info.totalS;

                // var thisSize = info.thisS + moveDis;
                // var thatSize = info.totalS - thisSize;

                // if (thisSize != minSize) {
                //     thisSize = (thisSize / boxesSize * 100).toFixed(6) + "%";
                // }

                // if (thatSize != minSize) {
                //     thatSize = (thatSize / boxesSize * 100).toFixed(6) + "%";
                // }
                
                if(thatSize<=0){
                    alert('11')
                    thatSize = 1
                }
                
                left[size](thisSize)
                right[size](thatSize);
                setInfo(e);//设定初始位置
                moveS = e[axis];//判断移动的方向
            })
        $doc.bind("mouseup", function () {

            if (!moving) return;
            moving = false;
        })
    }




</script>
<style>
.example{
    display: flex;
    width: 100%;
    height:400px;
    background-color: aqua;
}
.left{
    background-color: white;
    width: 500px;
    height: 100%;
    flex:none;

}
.bar{
    width: 20px;
    height: 100%;
    display: block;
    cursor: col-resize;
    z-index: 15;
    top: 0px;
    right: 0px;
    background-color: black 
}
.img{
    width: 155px;
    height: 100%;
    float: left;
    flex-wrap: inherit;
}
</style>