<!DOCTYPE html> <htmlheadMeta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> charset="utf-8"title></="keywords"="" ="description"/> style> .select-item { background-color: #5bc0de; display inline-block text-align center border-radius 3px margin-right 10px cursorpointer padding 6px 20px color #fff; } .cursored default .project-content,.people-content margin 30px 50px .people-content margin-top 30px .drag-div border 1px solid #5bc0de padding10px margin-bottom width 800px cursor pointer .select-project-item display text-align border-radius .drag-people-label margin-bottom0 padding-right [v-cloak]none} </body> div class='drag-content' id="dragCon" > ='project-content'> ='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}div='people-content'='drag-div' ="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'> ='select-project-item'> label ='drag-people-label'>{{ppdt.name}}:labelscript type="text/javascript" src="js/vue.min2.js"script="text/javascript"> var dom; ss = new Vue({ 'el#dragCon,data:{ projectdatas:[{ id:1葡萄 },{ id:2芒果3木瓜4榴莲 }],peopledata:[{ id:小颖hover空巢青年三 一丢丢 }] },mounted:function(){ this.$nextTick((){ }) },watch:{ projectdatas:{ handler:(val,oldval){ },deep:true },peopledata:{ handler: } },methods: { drag:(event){ dom = event.currentTarget },drop:(event){ event.preventDefault(); event.target.appendChild(dom); },allowDrop:(event){ event.preventDefault(); } } }); >
实现效果：
