Example of Vue. js to achieve drag-and-drop effect, vue. js drag-and-drop instance

Example of Vue. js to achieve drag-and-drop effect, vue. js drag-and-drop instance

The page effect is as follows:

For the code, see Dangdang:

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>

In this line of code, When Xiao Ying binds a dragstart event, the drag ($ event) Write method and js write method are different. If you want to upload 'event' when binding an event in vue ', you cannot write in js format. For example, if @ dragstart = 'drag (event) 'is written, the event you get in the drag method is undefined, because it regards the event in @ dragstart = 'drag (event) 'as a variable, and the variable is not defined in data, it is undefined. in the morning, Xiaoying encountered this problem. so remember that the format is prefixed with soy sauce: @ dragstart = 'drag ($ event )'

Js Code:

<Script> let dom = nullexport default {components :{}, ready: function () {}, methods :{ drag: function (event) {dom = event. currentTarget}, drop: function(event1_event.preventdefa(({event.tar get. appendChild (dom) ;}, allowDrop: function (event) {event. preventDefault () ;},}, data () {return {projectdatas: [{id: 1, name: 'Grape ',}, {id: 2, name: 'mango' ,}, {id: 3, name: 'papay' ,}, {id: 4, name: 'durian',}], leledata: [{id: 1, name: 'xiaoying', },{ id: 2, name: 'hover ', },{ id: 3, name: 'EMPTY nest youth 3 ',}, {id: 3, name: ' ',}] }}</script>

The above is an example of using Vue. js to implement drag-and-drop effects. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!