vuejs2.0运用原生js实现简单的拖拽元素功能


[javascript]  view plain  copy
 
  1. "font-size:18px;">http://www.cnblogs.com/moqiutao/p/6428632.html  
  2.   
[javascript]  view plain  copy
 
  1. "font-size:18px;">  
  2.   
  3.   
  4. "viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
  5. "utf-8">  
  6.   
  7. "keywords" content="" />  
  8. "description" content="" />  
  9.   
  10.   
  11.   
  12.   
  13.   
  14. class='drag-content' id="dragCon" >  
  15.   class='project-content'>  
  16.     class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}
  
  •   
  •   
  •   class='people-content'>  
  •     class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'>  
  •       class='select-project-item'>  
  •         class='drag-people-label'>{{ppdt.name}}:  
  •       
  •   
  •     
  •   
  •   
  •   
  •   
  • "text/javascript" src="js/vue.min2.js">  
  • "text/javascript">  
  •     var dom;  
  •     var ss = new Vue({  
  •         'el':'#dragCon',  
  •         data:{  
  •             projectdatas:[{  
  •                 id:1,  
  •                 name:'葡萄'  
  •               },{  
  •                 id:2,  
  •                 name:'芒果'  
  •               },{  
  •                 id:3,  
  •                 name:'木瓜'  
  •               },{  
  •                 id:4,  
  •                 name:'榴莲'  
  •               }],  
  •   
  •   
  •                peopledata:[{  
  •                 id:1,  
  •                 name:'小颖'  
  •               },{  
  •                 id:2,  
  •                 name:'hover'  
  •               },{  
  •                 id:3,  
  •                 name:'空巢青年三 '  
  •               },{  
  •                 id:3,  
  •                 name:'一丢丢'  
  •               }]  
  •   
  •         },  
  •         mounted:function(){  
  •             this.$nextTick(function(){  
  •                   
  •             })  
  •         },  
  •           watch:{  
  •             projectdatas:{  
  •                 handler:function(val,oldval){  
  •   
  •                 },  
  •                 deep:true  
  •             },  
  •             peopledata:{  
  •                 handler:function(val,oldval){  
  •   
  •                 },  
  •                 deep:true  
  •             }  
  •         },  
  •   
  •         methods: {  
  •             drag:function(event){  
  •                dom = event.currentTarget  
  •             },  
  •             drop:function(event){  
  •               event.preventDefault();  
  •               event.target.appendChild(dom);  
  •             },  
  •             allowDrop:function(event){  
  •               event.preventDefault();  
  •             }  
  •           }  
  •   
  •     });  
  •   
  •   
  •   
  •   
  •   

  • 实现效果:

    vuejs2.0运用原生js实现简单的拖拽元素功能_第1张图片


    你可能感兴趣的:(基于vue开发的项目)