vue 拖动布局,vue div拖拽
这篇文章主要为大家详细介绍了某视频剪辑软件实现拖拽式分割布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现拖拽式分割布局的具体代码，供大家参考，具体内容如下
示例展示
代码
特地写了一个演示代码，可以直接复制下来运行
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
标题文档/标题
/头
身体
div id=应用程序
div class=容器id=容器
div id=top class=toptop/div
div id=bar class=bar/div
div id= bottom class= bottom bottom/div
/div
/div
脚本
var应用=新Vue({
埃尔： #app ，
数据：{
},
已安装(){
this.dragChangeHeight(bar ， top )
},
方法：{
拖拽改变高度(拖动，面板){
var dragEl=文档。getelementbyid(拖动)
var面板El=文档。getelementbyid(面板)
德拉格尔。onmousedown=function(ev){
var disH=panelEl.offsetHeight
var disY=ev.clientY
var disT=panelEl.offsetTop
var b=
文档。onmousemove=function(ev){
面板el。风格。高度=碟形(ev。clienty-disY) px
//面板el。风格。top=disL-(ev。clienty-disY) px
}
document.onmouseup=function() {
文档。onmousemove=document。onmouseup=null
}
返回错误的
}
},
拖曳宽度(拖动，面板){
var dragEl=文档。getelementbyid(拖动)
var面板El=文档。getelementbyid(面板)
德拉格尔。onmousedown=function(ev){
var disW=panelEl.offsetWidth
var disX=ev.clientX
var disL=panelEl.offsetLeft
var b=
文档。onmousemove=function(ev){
面板el。风格。宽度=宽度(ev。clientx-disX) px
//面板el。风格。left=disL-(ev。clientx-disX) px
}
document.onmouseup=function() {
文档。onmousemove=document。onmouseup=null
}
返回错误的
}
},
}
})
/脚本
风格
正文{
边距：0;
}。容器{
/*填充：20px*/
身高：90vh
宽度：90vw
显示器：flex
伸缩方向：列；
}。顶部{
宽度：100%;
高度：300像素
背景色：蓝色；
}。酒吧
宽度：100%;
高度：10px
光标：n-调整大小；
背景色：黑色；
}。底部{
宽度：100%;
弹性：自动；
背景色：红色；
}
/风格
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。