vue.js拖拽组件开发实例

Question

如何实现用vue.js实现拖拽功能?求大声指教

Answer 1

<div id="drag" v-drag="param" class="drag1"></div>
<div id="drag" v-drag="param" class="drag2"></div>Vue.directive('drag',{
            bind:function(){
                //只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
            },
            inserted:function(el,banding){
                var param = banding.value;
                console.log(param.a,param.b);
                //被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
                el.onmousedown=function(e){
                    var dx = e.clientX - el.offsetLeft;
                    var dy = e.clientY - el.offsetTop;                    el.onmousemove = function(e){
                        e.stopPropagation();                        var left = e.clientX - dx;
                        var top = e.clientY - dy;                        el.style.left = left + 'px';
                        el.style.top = top + 'px';
                    }
                    document.onmouseup = function(){
                        el.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            },
            update:function(){
                //被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
            },
            componentUpdated:function(){
                //被绑定元素所在模板完成一次更新周期时调用
            },
            unbind:function(){
                //只调用一次， 指令与元素解绑时调用
            }
        })var vm = new Vue({
      ...
})