el-dialog的整体拖拽及拖拽部分为图片的问题

vue中给dialog添加拖拽功能的步骤

1. 在utils文件中新增directive.js文件

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
    bind(el, binding, vnode, oldVnode) {
        const dragObj = el.querySelector('.el-dialog')
        dragObj.style.cursor = 'move'

        dragObj.onmousedown = (e) => {
        // 重点，当el-dialog中的内部为图片时，拖拽异常的解决方法
            if (e.stopPropagation) e.stopPropagation();
            if (e.preventDefault) e.preventDefault();
            e.cancelBubble = true;
            e.returnValue = false;
            
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dragObj.offsetLeft;
            const disY = e.clientY - dragObj.offsetTop+150;

            document.onmousemove = function(event) {
                // 移动当前元素
                dragObj.style.marginLeft = (event.clientX-disX)+"px"
                dragObj.style.marginTop = (event.clientY-disY)+"px"
            }

            document.onmouseup = function(e) {
                this.onmousedown = null
                this.onmousemove = null
            }
        }
    }
})

2. 在main.js文件中新增代码

import './utils/directives.js'; //el-dialog拖拽

3. 在需要使用拖拽功能的el-dialog标签中，添加v-dialogDrag

<el-dialog
       title="图片预览"
       :visible.sync="dialogVisible"
        v-dialogDrag
>
      <span class="dialogImg">
            <img src="" alt="">
     </span>
 </el-dialog>