頁(yè)面效果如下所示：
代碼請(qǐng)看這里,當(dāng)當(dāng)當(dāng)當(dāng):
html:
代碼如下：
<template><div class='drag-content'><div class='project-content'><div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div></div><div class='people-content'><div class='drag-div' v-for='(ppindex,ppdt) in peopledata' @drop='drop($event)' @dragover='allowDrop($event)'><div class='select-project-item'><label class='drag-people-label'>{{ppdt.name}}:</label></div></div></div></div></template><div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div>在這行代碼中小穎在綁定dragstart事件時(shí),drag($event)寫(xiě)法和js寫(xiě)法不一樣,如果你在vue中綁定事件時(shí)要傳 'event',你不能像js那種格式去寫(xiě) ,比如:@dragstart='drag(event)' 這個(gè)寫(xiě)的話你在drag方法中獲取到的event是 undefined,因?yàn)樗?@dragstart='drag(event)' 中的event當(dāng)成了一個(gè)變量,而該變量并沒(méi)有在data中定義所以就是 undefined.早上小穎就碰到過(guò)此坑.所以切記格式是介個(gè)醬紫的: @dragstart='drag($event)'
js代碼:
代碼如下：
<script>let dom = nullexport default {components: {},ready: function() {},methods: {drag:function(event){dom = event.currentTarget},drop:function(event){event.preventDefault();event.target.appendChild(dom);},allowDrop:function(event){event.preventDefault();},},data() {return {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:'一丟丟',}]}}}</script>以上所述是小編給大家介紹的Vue.js實(shí)現(xiàn)拖放效果的實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)512筆記網(wǎng)站的支持！
注：關(guān)于Vue.js實(shí)現(xiàn)拖放效果的實(shí)例的內(nèi)容就先介紹到這里，更多相關(guān)文章的可以留意512筆記的其他信息。
關(guān)鍵詞：vue.js
