127 lines
4.3 KiB
JavaScript
127 lines
4.3 KiB
JavaScript
/**
|
|
* 自定义视频拖动元素
|
|
* */
|
|
|
|
import Vue from "vue";
|
|
|
|
Vue.directive('vdrag', {
|
|
bind: (el) => {
|
|
// console.log(el, '---el')
|
|
// 获取弹框标题区域dom节点
|
|
const headerDom = el.querySelector('.room-top');
|
|
// 修改鼠标图标样式
|
|
headerDom.style.cursor = "move";
|
|
// 禁止拖拽时选中标题中文本内容
|
|
headerDom.style.userSelect = "none";
|
|
|
|
// 获取弹框区域的dom节点
|
|
const dialogDom = el;
|
|
console.log(dialogDom,'---dialogDom')
|
|
// 弹窗距离边界的距离
|
|
const boundingPadding = 1;
|
|
|
|
// 是否正在拖动
|
|
let isDrag = false;
|
|
|
|
// 鼠标按下时位置坐标
|
|
let clientX = 0, clientY = 0;
|
|
|
|
// 按下时弹框位置坐标
|
|
let dialogLeft = 0, dialogTop = 0;
|
|
let newLeft = 0, newTop = 0;
|
|
let dialogWidth = 0, dialogHeight = 0;
|
|
let distLeft = 0, distTop = 0;
|
|
|
|
// 监听鼠标按下事件
|
|
headerDom.onmousedown = function(e) {
|
|
isDrag = true;
|
|
|
|
// 获取当前鼠标位置坐标
|
|
clientX = e.clientX;
|
|
clientY = e.clientY;
|
|
|
|
if(dialogDom.style.left == '')
|
|
{
|
|
// 未获取到 直接取50%
|
|
dialogLeft = document.documentElement.clientWidth / 2;
|
|
}
|
|
else
|
|
{
|
|
// 获取当前弹窗位置坐标
|
|
dialogLeft = parseFloat(dialogDom.style.left);
|
|
}
|
|
if(isNaN(dialogLeft)){
|
|
dialogLeft = 0;
|
|
}
|
|
newLeft = dialogLeft;
|
|
|
|
if(dialogDom.style.top == '')
|
|
{
|
|
// 未获取到 直接取50%
|
|
dialogTop = document.documentElement.clientHeight / 2;
|
|
}
|
|
else
|
|
{
|
|
// 获取当前弹窗位置坐标
|
|
dialogTop = parseFloat(dialogDom.style.top);
|
|
}
|
|
if(isNaN(dialogTop)){
|
|
dialogTop = 0;
|
|
}
|
|
newTop = dialogTop;
|
|
|
|
const dialogBounding = dialogDom.getBoundingClientRect();
|
|
dialogWidth = dialogBounding.width;
|
|
dialogHeight = dialogBounding.height;
|
|
distLeft = dialogLeft - dialogBounding.left;
|
|
distTop = dialogTop - dialogBounding.top;
|
|
|
|
// 绑定鼠标移动事件
|
|
document.addEventListener('mousemove', el.mousemove);
|
|
}
|
|
|
|
// 监听鼠标移动事件
|
|
el.mousemove = function(e) {
|
|
// 按下的时候，执行移动操作
|
|
if(isDrag){
|
|
// 设置弹窗位置以及边界处理
|
|
newLeft = dialogLeft + e.clientX - clientX;
|
|
// console.log(newLeft, '---newLeft')
|
|
// console.log(distLeft, '---distLeft')
|
|
// console.log(boundingPadding, '---boundingPadding')
|
|
if(newLeft-distLeft<boundingPadding){
|
|
newLeft = boundingPadding+distLeft;
|
|
}else if(newLeft-distLeft>window.innerWidth-boundingPadding-dialogWidth){
|
|
newLeft = distLeft + window.innerWidth - boundingPadding - dialogWidth;
|
|
}
|
|
dialogDom.style.left = newLeft + 'px';
|
|
|
|
newTop = dialogTop + e.clientY - clientY;
|
|
// console.log(newTop, '---newTop')
|
|
// console.log(distTop, '---distTop')
|
|
// console.log(boundingPadding, '---boundingPadding')
|
|
if(newTop-distTop<=boundingPadding){
|
|
newTop = boundingPadding + distTop;
|
|
}else if(newTop-distTop>=window.innerHeight-boundingPadding-dialogHeight){
|
|
newTop = distTop + window.innerHeight - boundingPadding - dialogHeight;
|
|
}
|
|
dialogDom.style.top = newTop + 'px';
|
|
}
|
|
}
|
|
|
|
// 监听鼠标抬起事件
|
|
el.mouseup = function(e) {
|
|
isDrag = false;
|
|
|
|
// 解绑鼠标移动事件
|
|
document.removeEventListener('mousemove', el.mousemove);
|
|
}
|
|
|
|
// 绑定鼠标抬起事件
|
|
document.addEventListener('mouseup', el.mouseup);
|
|
},
|
|
unbind: (el) => {
|
|
// 解绑鼠标抬起事件
|
|
document.removeEventListener('mouseup', el.mouseup);
|
|
}
|
|
}) |