重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

vuejs2.0运用原生js如何实现拖拽元素功能

这篇文章将为大家详细讲解有关vuejs2.0运用原生js如何实现拖拽元素功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注于黄南州企业网站建设,响应式网站建设,购物商城网站建设。黄南州网站建设公司,为黄南州等地区提供建站服务。全流程按需定制，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

示例如下：















 
  {{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(); } } });

实现效果：

vuejs2.0运用原生js如何实现拖拽元素功能