vue 拖拽布局,vue div高度
这篇文章主要为大家详细介绍了某视频剪辑软件实现差异高度可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现差异高度可拖拽的具体代码，供大家参考，具体内容如下
这里有一个现成的演示，可以实现页面差异的拖拽功能，但是和我想要的效果不是很一样，所以说后边有根据我的实际需求又重新修改了一下，先看一下现在的演示效果。
模板
div id= eagleMapContainer style= border:1px纯红；溢出-y:自动；title=
div id= tz @ mousedown=拖曳鹰 style= border:1px纯蓝；
div title=拖动调整大小id=move_tz style=border: 1px纯绿色；/div
/div
/div
/模板
脚本
导出默认值{
名称： eagleMap ，
data() {
返回{}
},
方法：{
拖拉鹰：函数(e) {
var target div=文档。getelementbyid( eagleMapContainer )；
//得到点击时该地图容器的宽高：
var目标格高度=目标格。偏移高度；
var startX=e.clientX
var startY=e .客户关系.
var _ this=this
文档。onmousemove=function(e){
e。防止默认()；
//得到鼠标拖动的宽高距离：取绝对值
var distX=math。ABS(e . clientx-startX)；
var distY=数学。ABS(客户-开始)；
//往上方拖动：
如果（客户开始){
目标部门。风格。height=target div height distY px ；
}
//往下方拖动：
if(e . clientx startX e . clienty startY){
目标部门。风格。height=(targetdiveheight-distY)“px”；
}
if(parse int(target div。风格。高度)=300){
目标部门。风格。高度=300 px
}
if(parse int(target div。风格。高度)=150){
目标部门。风格。身高=150 px
}
}
document.onmouseup=function () {
document.onmousemove=null
}
}
},
};
/脚本
样式范围
#eagleMapContainer {
位置：绝对；
左：13%;
底部：10px
z指数：200;
溢出：隐藏；
可见性：可见；
宽度：200像素
高度：200像素
}
#tz {
位置：绝对；
右：1px
top:1px；
宽度：27px
高度：20px
光标：ne-resize；
z指数：200001;
背景图像：URL(" ")；
}
#tz:悬停{
背景色：# 666;
}
#move_tz {
位置：绝对；
右：0px
top:0px；
宽度：27px
高度：20px
光标：ne-resize；
z指数：100;
背景图像：URL(" ")；
背景-位置：0px 0px
}
/风格
但是这个效果和我想要的不是很一样，所以得稍微改造了一下。
我想要效果是：我有一个div，里面包含了很多小方块列表，因为超出设置了超出滚动，所以是在有滚动条的差异上添加实现高度变化的拖拽。
接下来就是改造一下上边的演示，简单点，直接上代码：
在上边需要拖拽的差异下面添加一个div，就是点到这个差异开始实现拖拽功能。
！-拖拉拽的小框-
div id= tz @ mousedown=拖曳鹰
div title=拖动调整大小id=move_tz/div
/div
需要根据拖拽实现高度变化的差异设置一个id，假设为"福帝夫",然后编写方法。
//拖拉
拖拉鹰
var target div=文档。getelementbyid( fuDiv )；
//得到点击时该地图容器的宽高：
var目标格高度=目标格。偏移高度；
var startX=e.clientX
var startY=e .客户关系.
var _ this=this
文档。onmousemove=function(e){
e。防止默认()；
//得到鼠标拖动的宽高距离：取绝对值
var distY=数学。ABS(客户-开始)；
//往上方拖动：
如果（客户开始){
目标部门。风格。height=target div height-distY px ；
}
//往下方拖动：
if(e . clientx startX e . clienty startY){
目标部门。风格。height=(targetDivHeight distY) px ；
}
if(parse int(target div。风格。高度)=320){
目标部门。风格。高度=320 px
}
if(parse int(target div。风格。身高)=160){
目标部门。风格。身高=160‘px’；
}
}
document.onmouseup=function () {
document.onmousemove=null
}
},
然后给他们设置一下钢性铸铁样式，其实这个地方就随意了，根据自己喜好来。
#tz {
宽度：100%;
高度：5px
光标：s-resize；
z指数：200001;
}
#move_tz {
宽度：100%;
高度：5px
光标：s-resize；
z指数：100;
背景图像：URL(" ")；
背景-位置：0px 0px
}
最后效果：
效果不是特别的好，还有很多地方是值得优化以下的，暂时不写了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。