element中dialog拖拽,el-dialog可拖动
本文主要介绍了某视频剪辑软件项目中实现埃尔对话组件可拖拽效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
0.首先上图，看效果1.实现方法参考资料
0. 首先上图，看效果
1. 实现方法
第一步：创建drag.js文件实现拖拽源码
/**
* 拖拽移动
* @param {elementObjct}栏鼠标点击控制拖拽的元素
* @param {elementObjct} target移动的元素
* @param {function}回调移动后的回调
*/
导出函数startDrag(bar、target、callback) {
var params={
top: 0，
左：0,
当前时间：0,
当前值：0,
标志：假，
cWidth: 0，
cHeight: 0，
tWidth: 0，
重量：0
};
//给拖动块添加样式
酒吧。风格。cursor= move
//获取相关半铸钢钢性铸铁(铸造半钢)属性
//o是移动对象
//var getCss=function (o，key) {
//返回o.currentStyle？o .当前样式[key]:文档。默认视图。getcomputedstyle(o，false)[key]；
//};
酒吧。onmousedown=function(event){
//按下时初始化参数
var e=事件？事件：窗口.事件
params={
top: target.offsetTop，
左：target.offsetLeft，
currentX: e.clientX，
当前：电子客户，
标志：真的，
cWidth:文档。身体。客户端宽度，
文件。身体。客户身高，
tWidth: target.offsetWidth，
目标：偏离目标
};
//给被拖动块初始化样式
目标。风格。margin=0；
目标。风格。top=参数。顶级‘px’；
目标。风格。left=params。左‘px’；
如果(!事件){
//防止工业管理学(工业工程)文字选中
bar.onselectstart=function () {
返回错误的
}
}
文档。onmousemove=function(event){
//防止文字选中
window.getSelection？window.getSelection().removeAllRanges():document。选择。empty()；
var e=事件？事件：窗口.事件
if (params.flag) {
var nowX=e.clientX
var nowY=e.clientY .
//差异距离
var disX=nowX-params。currentx
var disY=nowY-params。当前；
//最终移动位置
var zLeft=0；
var zTop=0；
zLeft=parse int(params。左)disX
//限制X轴范围
if(zLeft=-parse int(params。twidth/2)){
zLeft=-parse int(params。twidth/2)；
}
if(zLeft=params。cwidth-parse int(参数。twidth * 0.5)){
zLeft=params。cwidth-parse int(参数。twidth * 0.5)；
}
zTop=parse int(params。top)disY；
//限制Y轴范围
if (zTop=0) {
zTop=0；
}
if(zTop=params。解析int(params。高度* 0.5)){
zTop=params。解析int(params。高度* 0.5)；
}
//执行移动
目标。风格。left=zLeft px
目标。风格。top=zTop px
}
如果(回调类型==函数){
回调(zLeft，zTop)；
}
}
document.onmouseup=function () {
params.flag=false
document.onmousemove=null
document.onmouseup=null
};
};
}
第二步：新建directive.js文件，创建某视频剪辑软件指令配置文件
//引入拖拽射流研究…
从导入{ startDrag } ./drag.js
/**
* 为埃尔对话弹框增加拖拽功能
* @param {*} el指定数字正射影像图
* @param {*}绑定绑定对象
* desc只要用到了埃尔对话的组件，都可以通过增加v型可拖动属性变为可拖拽的弹框
*/
const draggable=(el，binding)={
//绑定拖拽事件[绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]
startDrag(el.querySelector( .el-dialog__header )、el.querySelector( .El-dialog’)、绑定。值)；
};
常量指令={
可拖动，
};
//这种写法可以批量注册指令
导出默认值{
安装(Vue) {
对象.键(指令)。forEach((key)={
Vue.directive(key，directives[key])；
});
},
};
第三步：main.js文件中全局引入某视频剪辑软件指令
/* 注册全局指令*/
从导入指令。/utils/directive ；
Vue.use(指令)
第四步：使用虚拟桌面
el对话
v型可拖动
Title=新
:visible.sync=isShow
@close=handleCancelConfigInfo
- xxxx项目符号框内容.
/el格式
div slot=页脚
El按钮size=small 取消/el按钮
El-button size=small 保存/el-button
/div
/el-dialog
需要注意的事项
文件的导入路径应该一致。
参考资料
自定义拖动指令v-drag vue元素来拖动拖动项目符号框。
关于vue项目中el-dialog组件拖放效果的实现，本文到此为止。更多vue el-dialog的相关拖放内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。