目錄

• 0. 首先上圖，看效果
• 1. 實現方法
• 參考資料

0. 首先上圖，看效果

1. 實現方法

第一步：建立 drag.檔案 實現拖拽原始碼

/**
* 拖拽移動
* @param {elementObjct} bar 滑鼠點選控制拖拽的元素
* @param {elementObjct} target 移動的元素
* @param {function} callback 移動後的回撥
*/
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';

  // 獲取相關屬性
  // 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.offsetWidhttp://www.cppcns.com
 
th,tHeight: target.offsetHeight
   };

   // 給被拖動塊初始化樣式
   target.style.margin = 0;
   targetwww.cppcns.com.style.top = params.top + 'px';
   target.style.left = params.left + 'px';

   if (!event) {
    // 防止Iwww.cppcns.comE文字選中
    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);
     }

     // 執行移動
     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 檔案，建立指令配置檔案

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

/**
* 為el-dialog彈框增加拖拽功能
* @param {*} el 指定dom
* @param {*} binding 繫結物件
* desc  只要用到了el-dialog的元件，都可以通過增加v-draggable屬性變為可拖拽的彈框
*/
const draggable = (el,binding) => {
  // 繫結拖拽事件 [繫結拖拽觸發元素為彈框頭部、拖拽移動元素為整個彈框]
  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 彈框內容... -->
 </el-form>
 <div slot="footer">
   <el-button size="small">取消</el-button>
   <el-button size="small">儲存</el-button>
 </div>
</el-dialog>

注意事項

檔案引入路徑需前後保持一致

參考資料

Vue 自定義拖拽指令 v-drag vue+element 實現拖拽 Drag 彈框

到此這篇關於vue專案中實現el-dialog元件可拖拽效果的文章就介紹到這了,更多相關vue el-dialog可拖拽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！