JS两种实现实现的方法讲解

拖拽有两种，一个是利用h5的拖拽属性 drag 实现，另一种是利用鼠标 按下-移动-抬起 事件模拟实现。

1、h5拖拽

function mydrag(el){
    var disx,disy,left,top;
    el.draggable = true;
    el.ondragstart=function(e){
        disx = e.clientx;
        disy = e.clienty;
        left = parseint(window.getcomputedstyle(el).marginleft);
        top = parseint(window.getcomputedstyle(el).margintop);  
    }
    el.ondrag=function(e){
        //通过事件委托，计算移动的距离
        //这里注意判断x,y大于0，因为拖拽结束，会有一次移动，x,y值小于0
        if(e.clientx>0 || e.clienty>0){
            var l = e.clientx - disx;
            var t = e.clienty - disy;
            //移动当前元素  
            el.style.marginleft = left + l + 'px';
            el.style.margintop = top + t + 'px';
        }
    }
    el.ondragend=function(e){
        //console.log('dragend')
    }
}

2、使用鼠标事件模拟拖拽

function mydrag(el){
    el.draggable = false
    el.onmousedown = function (e) {
         //鼠标按下，计算当前元素距离可视区的距离
         let disx = e.clientx;
         let disy = e.clienty;
         let left = parseint(window.getcomputedstyle(el).marginleft);
         let top = parseint(window.getcomputedstyle(el).margintop);

         document.onmousemove = function (e) {
             //通过事件委托，计算移动的距离
             let l = e.clientx - disx;
             let t = e.clienty - disy;
             //移动当前元素  
             el.style.marginleft = left + l + 'px';
             el.style.margintop = top + t + 'px';
         };
         document.onmouseup = function (e) {
             document.onmousemove = null;
             document.onmouseup = null;
         };
    }
}

vue 自定义拖拽指令,改变父元素位置

场景：一个面板，包含标题及内容部分，拖拽标题，实现面板移动 

//html 部分
<p class='mypanel'>
    <p class='title' v-drag></p>
    <p class='content'></p>
</p>

//指令实现
vue.directive('drag',//自定义指令
    {bind:function (el, binding, vnode) {
            el.draggable = false
            el.onmousedown = function (e) {
                el.parentnode.draggable = false
                //鼠标按下，计算当前元素距离可视区的距离
                let disx = e.clientx;
                let disy = e.clienty;
                let left = parseint(window.getcomputedstyle(el.parentnode).marginleft);
                let top = parseint(window.getcomputedstyle(el.parentnode).margintop);

                document.onmousemove = function (e) {
                    //通过事件委托，计算移动的距离
                    let l = e.clientx - disx;
                    let t = e.clienty - disy;
                    //改变父元素margin属性  
                    el.parentnode.style.marginleft = left + l + 'px';
                    el.parentnode.style.margintop = top + t + 'px';
                    //回调接口
                    binding.value(l,t);
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
    }
);