阻止拖拽

在vue中，通过自定义指令绑定一个拖拽事件，有时候还需要相对应的阻止拖拽事件，为了在可拖拽区块内如果含表单等鼠标操作复制事件而不需要拖拽的某一块时使用。

 directives: {
        /*自定义拖拽*/
        dragm: {
            inserted: function(el, binding, vnode) {
                var odiv = el.parentNode;
                odiv.onmousedown = function(eve) {
                    eve = eve || window.event;
                    var clientX = eve.clientX;
                    var clientY = eve.clientY;
                    var odivX = odiv.offsetLeft;
                    var odivY = odiv.offsetTop;
                    var odivLeft = clientX - odivX;
                    var odivTop = clientY - odivY;
                    var clientWidth = document.documentElement.clientWidth;
                    var oWidth = odiv.clientWidth;
                    var odivRight = clientWidth - oWidth;
                    var clientHeight = document.documentElement.clientHeight;
                    var oHeight = odiv.clientHeight;
                    var odivBottom = clientHeight - oHeight;
                    document.onmousemove = function(e) {
                        e.preventDefault();
                        var left = e.clientX - odivLeft;
                        if (left < 0) {
                            left = 0
                        }
                        if (left > odivRight) {
                            left = odivRight
                        }
                        var Top = e.clientY - odivTop;
                        if (Top < 0) {
                            Top = 0
                        }
                        if (Top > odivBottom) {
                            Top = odivBottom
                        }
                        odiv.style.left = left + "px";
                        odiv.style.top = Top + "px";
                    }
                    document.onmouseup = function() {
                        document.onmouseup = "";
                        document.onmousemove = "";
                    }
                }
            }
        },
        /*阻止拖拽*/
        stopdrag: {
            inserted: function(el, binding, vnode) {
                let element = el;
                element.onmousedown = function(e) {
                    e.stopPropagation()
                }
            }
        }
    }

使用时：

<div v-if="dragvisib" class="drag dragdialog drag2" v-drag>
       <div @click.stop="stopfn($event)" class="dragdialoginner" style="
       ">
       <p class="dragdialogtitle">
        <span>相似工单</span>
        <span>
            <i class="el-icon-rank" @click="fnclose"></i>
            <i class="el-icon-circle-close" @click="fnclose"></i>
        </span>
       </p>
        <el-row>
            <el-col>
               <customdialogorder v-stopdrag></customdialogorder>
            </el-col>
        </el-row>
       </div>
    </div>