自定义拖拽

1.在data中定义name,和一个空数组

       data(){
          return{      
                name:"",//数据绑定
                list:[],//接收数据
            }
        },

2.在模板中显示位置

     <input type="text" v-model="name" @keyup.enter="add">
      
      <div class="down">
           <div class="every" v-for="(item,index) in list" :key="index" 
              :style="{background:item.color,left:item.x+'px',top:item.y+'px'}"
              v-drag 
             
           >
               <span >{{item.name}}</span>
           </div>
       </div>

3.在 directives自定义指令中进行操作

​
     directives:{
            drag:{ //指令名 通过 v-drag来使用
                inserted(el){//钩子
                    el.onmousedown=(e)=>{//获取按下的位置
                        console.log(e)
                        var left =e.x -el.offsetLeft
                        var top =e.y -el.offsetTop
                     document.onmousemove=e=>{//移动的位置
                         el.style.left =e.x-left+'px'
                         el.style.top=e.y-top+'px'
                     }   
                     document.onmouseup=()=>{//离开
                         document.onmousemove=null
                     }
                    }
                }
            }
        },

​

4.css样式

   .down{
        width: 100%;
        position: relative;//相对
        .every{
            position: absolute;//绝对
             padding: 20px;
            margin-bottom: 30px;
        }
    }