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 部分
<div class='myPanel'>
    <div class='title' v-drag></div>
    <div class='content'></div>
</div>

//指令实现
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;
                };
            };
        }
    }
);