vueカスタム命令における移動端とpc端divのドラッグ動作

2593 ワード

vueカスタムコマンドはとても興味深い存在で、とても便利な機能です.今日は急にdivを引っ張る機能をしたいと思って、直接書きたいと思っていました.vueファイルでは、実際にドラッグ&ドロップするのはdivのためだと考え、カスタムコマンドを思い浮かべます.
vue templateで

    import drag from '../assets/drag'
    import dragMove from '../assets/dragMove'


drag
新しいdrag.jsファイルこれはpc側のドラッグアップスキームです
import Vue from 'vue'

Vue.directive('drag',{
    bind:function (el) {
        //  document         el               
        el.onmousedown = (event) => {
            //           
            let pointX = event.clientX - el.offsetLeft;//    X          (          )
            let pointY = event.clientY - el.offsetTop;//    Y        (          )

            document.onmousemove = (e)=>{
                //                 ,       
                let left = e.clientX - pointX;
                let top = e.clientY - pointY;

                //      
                el.style.left = left + 'px';
                el.style.top = top + 'px';
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
})

dragMove
新しいdragMove.jsファイルこれはモバイル側のドラッグアップスキームです
import Vue from 'vue'
Vue.directive('dragMove',{
    bind: function (el, binding) {
        var touch,disX,disY
        el.ontouchstart = (e) => {
            if(e.touches){//      e        e.touches[0] 
                touch = e.touches[0];
            }else {
                touch = e;
            }
            disX = touch.clientX - el.offsetLeft;//    X          (          )
            disY = touch.clientY - el.offsetTop;//    Y        (          )
        }
        el.ontouchmove = (e)=>{
            if(e.touches){//      e        e.touches[0] 
                touch = e.touches[0];
            }else {
                touch = e;
            }
            //                 ,       
            let left = touch.clientX - disX;
            let top = touch.clientY - disY;

            //      
            el.style.left = left + 'px';
            el.style.top = top + 'px';
            e.preventDefault();//           
        };
        el.ontouchend = (e) => {
            // el.ontouchmove = null;
            // el.ontouchend = null;
        };
    }
})