vue拖拉拽生成组件,vue3拖拽组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现可拖拽组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了某视频剪辑软件实现可拖拽、拖拽组件，供大家参考，具体内容如下
描述：
组件仅封装拖拽功能，内容通过#页眉、#默认值、#页脚插槽自定义
效果：
代码：
模板
差异
ref=wrapper
拖动条包装器
差异
ref=header
class=拖动栏标题
！-头部区域-
插槽名称=header /
/div
div class=拖动栏-内容
！-主内容区域-
插槽名称=默认/
/div
div class=拖动栏-页脚
！-底部区域-
slot name=footer /
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
wrapperDom: null，
headerDom: null，
disX: 0，
disY: 0，
minLeft: 0，
maxLeft: 0，
minTop: 0，
maxTop: 0，
上一页：0,
prevTop: 0，
};
},
方法：{
initDrag() {
this.wrapperDom=this .$ refs.wrapper
this.headerDom=this .$ refs.header
这个。标题DOM。addevent侦听器( mousedown ，this.onMousedown，false)；//点击头部区域拖拽
},
onMousedown(东)
这个。disx=e . clientx-this。标题DOM。向左偏移；
这个。disy=e . clienty-this。标题DOM。offsettop
这个。最小左=这个。包装界。向左偏移；
这个。min top=this。包装DOM。offsettop
this.maxLeft=
窗户。内宽-这个。闵左——这个。包装界。offsetwidth
this.maxTop=
窗户。内在高度-这个。min top-这个。包装界。偏高；
const { left，top }=getComputedStyle(this。wrapperdom，false)；
这个。prev left=parse float(左)；
这个。prev top=parse float(top)；
文档。addevent侦听器( mousemove ，this.onMousemove，false)；
文档。addevent侦听器( mouseup ，this.onMouseup，false)；
文档。身体。风格。用户选择=“无”；//消除拖拽中选中文本干扰
},
onMousemove(e) {
让left=e . clientx-this。disx
让top=e . clienty-这个。disy
if (-left this.minLeft) {
左=-这个。min left
} else if (left this.maxLeft) {
左=这个。最大左侧；
}
if (-top this.minTop) {
top=-这个。min top
} else if (top this.maxTop) {
top=this.maxTop
}
这个。包装界。风格。左=这个。prev left left px
这个。包装界。风格。top=这个。prev top top px
},
onMouseup() {
文档。removeeventlistener( mousemove ，this.onMousemove，false)；
文档。removeeventlistener( mouseup ，this.onMouseup，false)；
文档。身体。风格。用户选择= auto//恢复文本可选中
},
},
已安装(){
这个。initdrag()；
}
};
/脚本
样式范围。拖动条包装器{
位置：固定；
z指数：2;
top:50%；
左：50%;
transform: translate(-50%，-50%)；
显示器：flex
伸缩方向：列；
}。拖动栏标题{
背景色：# eee
光标：移动；/*拖拽鼠标样式*/
}。拖动栏-内容{
背景色：# fff
}。拖动栏-页脚{
背景色：# fff
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。