vue拖动改变div容器宽度,vue 自由拖拽
这篇文章主要介绍了某视频剪辑软件实现可拖拽差异大小的方法，可封装为全局方法在项目中所需要地方直接调用(mixins)，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
下面看下某视频剪辑软件中可拖拽差异大小的方法。
可封装为全局方法在项目中所需要地方直接调用（混音)
方法：
参数：
1.allBox:最外层第差异类；
2.leftBox:最左层第差异类；
3.resizeBox:中间差异类；
4 .右边框：最右层第差异类；
左最小/右最小距离左右2侧最小距离；
leftBox，resizeBox，rightBox设置宽度均需浮动；
*若是在内部容器中，须在最外层添加位置：相对，否则会引起跳动，计算距离错误
dragDiv(allBox，leftBox，resizeBox，rightBox，leftMin=200，rightMin=200) {
var box=文档。getelementsbyclassname(全框)；
var left=文档。getelementsbyclassname(左框)；
var resize=文档。getelementsbyclassname(resizeBox)；
var right=文档。getelementsbyclassname(右框)；
对于(设I=0；我调整大小。长度；i ) {
//鼠标按下事件
调整[我]的大小onmousedown=函数(e) {
//颜色改变提醒
调整[I]的大小。风格。background= # 818181
var startX=e.clientX
调整[我]的大小左侧=。调整大小[我].获取
//鼠标拖动事件
文档。onmousemove=function(e){
var endX=e.clientX
var moveLen=resize[i].左(endX-startX)；//(endx-startx)=1移动的距离调整大小[我].左边的移动的距离=左边区域最后的宽度
var maxT=box[i].clientWidth - resize[i].offsetWidth//容器宽度-左边区域的宽度=右边区域的宽度
if(moveLen left min)moveLen=left min；
if(moveLen maxT-right min)moveLen=maxT-right min；
调整[I]的大小。风格。left=moveLen//设置左侧区域的宽度
对于(设j=0；j left.lengthj ) {
左[j]。风格。width=moveLen px
right[j].style.width=(box[i].客户端宽度-moveLen-10) px ；
}
};
//鼠标松开事件
文档。onmouseup=function(evt){
//颜色恢复
调整[I]的大小。风格。background= # d6d6d 6
document.onmousemove=null
document.onmouseup=null
调整[我]的大小。释放捕获调整大小[我].释放捕获().//当你不在需要继续获得鼠标消息就要应该调用释放捕获()释放掉
调整[我]的大小setCapture调整大小[我].set capture()；//该函数在属于当前线程的指定窗口里设置鼠标捕获
返回错误的
};
}
},
补充：vue中的可拖拽宽度差异
主要思路
在需要拖拽宽度的区域设置一个div，高度设为100%,宽度尽量窄一些（也不要太窄，3~6px左右)在此差异上绑定当"鼠标按下"时，触发文件绑定"鼠标移动"方法和鼠标抬起方法通过鼠标移动方法不断获取当前鼠标位置，设置需要变化大小差异的宽高。鼠标抬起时取消鼠标移动方法和鼠标抬起方法的绑定模板。
div class=容器id=内容框
div class=tab 左侧制表符/格
菜单 ref=菜单
左侧菜单
menu-resize ref= menu resize /div
/div
div class=内容
中心区域
歌剧
div class= opera-resize ref= opera resize /div
操作区域
/div
/div
/模板
脚本
导出默认值{
名称：" dropWidth "，
已安装(){
这个. nextTick(()={
这个。dropsize()；
})
},
方法：{
dropSize() {
让那个=这个，
menuWidth=200，
操作高度=200
这个参考文献。菜单大小。onmousedown=function(){
文档。onmousemove=function(e){
设clientX=e.clientX
//最大宽度
if(clientX=330){
clientX=330
}
//最小宽度
if(clientX=230){
clientX=230
//TODO这里减的是最左侧标签的宽度
菜单宽度=clientX-30；
那个参考文献。菜单。风格。width=clientX-30 px ；
}
document.onmouseup=function () {
console.log(当前宽度，菜单宽度)；
document.onmousemove=null
document.onmouseup=null
那个。释放捕捉那个。释放捕获()
}
这个参考文献。opera调整大小。onmousedown=function(){
让客户=e .客户
console.log(客户端)
if(clientY=100){
客户数=100;
if(clientY=300){
客户=300;
运营高度=客户
//TODO这里需要取反向
那个参考文献。歌剧。风格。高度=400-clientY px ；
console.log(当前宽度、歌剧高度)；
}
}
}
/脚本
样式范围。容器{
宽度：1000像素
高度：400像素
边框：2px固体# dddddd
显示器：flex
对齐-内容：居中；选项卡{
宽度：30px
身高：100%;
背景色：# EC8C32
伸缩：0;
灵活增长：0;菜单{
宽度：200像素
背景色：# AAB6E0
位置：相对；内容{
宽度：100%;歌剧{
高度：200像素
位置：绝对；
底部：0;
背景色：# F2BE25。菜单-调整大小{
宽度：5px
top:0；
右：0;
光标：列-调整大小；歌剧-调整大小{
高度：5px
左：0;
光标：行-调整大小；
/风格
实现效果
到此这篇关于某视频剪辑软件中的可拖拽宽度差异的文章就介绍到这了，更多相关某视频剪辑软件可拖拽宽度差异内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。