类codepen的实现可拖拽窗口demo

本文主要是介绍类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 = 20var boxesSize = $('.example')[size]();//盒子总宽console.log(boxesSize)var moveS = 0var $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-=moveDisthisSize+=moveDisconsole.log('右',boxesSize,thisSize,thatSize,moveDis)// if(thatSize==0)return}// 左移动或者上移动if (moveDir < 0) {thisSize += moveDisthatSize -= moveDisconsole.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>

 

这篇关于类codepen的实现可拖拽窗口demo的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---