网站建设资讯

NEWS

网站建设资讯

vue2.0运用原生js怎么实现拖拽元素功能

这篇文章主要介绍“vue2.0运用原生js怎么实现拖拽元素功能”,在日常操作中,相信很多人在vue2.0运用原生js怎么实现拖拽元素功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue2.0运用原生js怎么实现拖拽元素功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联建站,为您提供重庆网站建设公司网站制作公司、网站营销推广、网站开发设计,对服务成都活动板房等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!

示例如下:















 
  {{pjdt.name}}
 
             {{ppdt.name}}:    
  
    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();       }      }   });

实现效果:

vue2.0运用原生js怎么实现拖拽元素功能

到此,关于“vue2.0运用原生js怎么实现拖拽元素功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站标题:vue2.0运用原生js怎么实现拖拽元素功能
文章链接:http://cdweb.net/article/pijpho.html