vue項目中實現(xiàn)el-dialog組件可拖拽效果

更新時間：2022年01月13日 09:01:48 作者：huoren_

本文主要介紹了vue項目中實現(xiàn)el-dialog組件可拖拽效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

0. 首先上圖，看效果

1. 實現(xiàn)方法

第一步：創(chuàng)建 drag.js文件實現(xiàn)拖拽源碼

/**
?* 拖拽移動
?* @param ?{elementObjct} bar 鼠標點擊控制拖拽的元素
?* @param {elementObjct} ?target 移動的元素
?* @param {function} ?callback 移動后的回調(diào)
?*/
export function startDrag(bar, target, callback) {
? ? var params = {
? ? ? top: 0,
? ? ? left: 0,
? ? ? currentX: 0,
? ? ? currentY: 0,
? ? ? flag: false,
? ? ? cWidth: 0,
? ? ? cHeight: 0,
? ? ? tWidth: 0,
? ? ? tHeight: 0
? ? };
??
? ? // 給拖動塊添加樣式
? ? bar.style.cursor = 'move';
??
? ? // 獲取相關(guān)CSS屬性
? ? // o是移動對象
? ? // var getCss = function (o, key) {
? ? // ? return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
? ? // };
??
? ? bar.onmousedown = function (event) {
? ? ? // 按下時初始化params
? ? ? var e = event ? event : window.event;
? ? ? params = {
? ? ? ? top: target.offsetTop,
? ? ? ? left: target.offsetLeft,
? ? ? ? currentX: e.clientX,
? ? ? ? currentY: e.clientY,
? ? ? ? flag: true,
? ? ? ? cWidth: document.body.clientWidth,
? ? ? ? cHeight: document.body.clientHeight,
? ? ? ? tWidth: target.offsetWidth,
? ? ? ? tHeight: target.offsetHeight
? ? ? };
??
? ? ? // 給被拖動塊初始化樣式
? ? ? target.style.margin = 0;
? ? ? target.style.top = params.top + 'px';
? ? ? target.style.left = params.left + 'px';
??
? ? ? if (!event) {
? ? ? ? // 防止IE文字選中
? ? ? ? bar.onselectstart = function () {
? ? ? ? ? return false;
? ? ? ? }
? ? ? }
??
? ? ? document.onmousemove = function (event) {
? ? ? ? // 防止文字選中
? ? ? ? window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
??
? ? ? ? var e = event ? event : window.event;
? ? ? ? if (params.flag) {
? ? ? ? ? var nowX = e.clientX;
? ? ? ? ? var nowY = e.clientY;
? ? ? ? ? // 差異距離
? ? ? ? ? var disX = nowX - params.currentX;
? ? ? ? ? var disY = nowY - params.currentY;
? ? ? ? ? // 最終移動位置
? ? ? ? ? var zLeft = 0;
? ? ? ? ? var zTop = 0;
??
? ? ? ? ? zLeft = parseInt(params.left) + disX;
? ? ? ? ? // 限制X軸范圍
? ? ? ? ? if (zLeft <= -parseInt(params.tWidth / 2)) {
? ? ? ? ? ? zLeft = -parseInt(params.tWidth / 2);
? ? ? ? ? }
? ? ? ? ? if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {
? ? ? ? ? ? zLeft = params.cWidth - parseInt(params.tWidth * 0.5);
? ? ? ? ? }
??
? ? ? ? ? zTop = parseInt(params.top) + disY;
? ? ? ? ? // 限制Y軸范圍
? ? ? ? ? if (zTop <= 0) {
? ? ? ? ? ? zTop = 0;
? ? ? ? ? }
? ? ? ? ? if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) {
? ? ? ? ? ? zTop = params.cHeight - parseInt(params.tHeight * 0.5);
? ? ? ? ? }
??
? ? ? ? ? // 執(zhí)行移動
? ? ? ? ? target.style.left = zLeft + 'px';
? ? ? ? ? target.style.top = zTop + 'px';
? ? ? ? }
??
? ? ? ? if (typeof callback == "function") {
? ? ? ? ? callback(zLeft, zTop);
? ? ? ? }
? ? ? }
??
? ? ? document.onmouseup = function () {
? ? ? ? params.flag = false;
? ? ? ? document.onmousemove = null;
? ? ? ? document.onmouseup = null;
? ? ? };
? ? };
? }

第二步：新建 directive.js 文件，創(chuàng)建vue指令配置文件

// 引入拖拽js
import { startDrag } from './drag.js'

/**
?* 為el-dialog彈框增加拖拽功能
?* @param {*} el 指定dom
?* @param {*} binding 綁定對象
?* desc ? 只要用到了el-dialog的組件，都可以通過增加v-draggable屬性變?yōu)榭赏献У膹椏?
?*/
const draggable = (el, binding) => {
? ? // 綁定拖拽事件 [綁定拖拽觸發(fā)元素為彈框頭部、拖拽移動元素為整個彈框]
? ? startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
};

const directives = {
? ? draggable,
};
// 這種寫法可以批量注冊指令
export default {
? install(Vue) {
? ? ? Object.keys(directives).forEach((key) => {
? ? ? Vue.directive(key, directives[key]);
? ? });
? },
};

第三步：main.js文件中全局引入vue指令

/* 注冊全局指令 */
import directive from './utils/directive';
Vue.use(directive)
?
第四步：使用v-draagble
<el-dialog
? ?v-draggable
? ?title="新增"
? ?:visible.sync="isShow"
? ?@close="handleCancelConfigInfo">
? ?<-- xxxx 彈框內(nèi)容... -->
? ?</el-form>
? ?<div slot="footer">
? ? ? <el-button size="small">取消</el-button>
? ? ? <el-button size="small">保存</el-button>
? ?</div>
</el-dialog>

注意事項

文件引入路徑需前后保持一致