Vue.js to realize drag-and-drop effect _javascript technique

The page effect looks like this:

Code see here, when when:

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 in the binding DragStart event, drag ($event) writing and JS writing is not the same, if you are binding events in Vue to pass ' event ', you can not like JS that format to write, such as: @dragstart = ' drag (event) ' The event you get in the drag method is undefined because it treats the event in @dragstart = ' drag ' as a variable that is not defined in data so it is Undefined in the morning. So remember that the format is a purple: @dragstart = ' drag ($event) '

JS Code:

<script> let
dom = null
export 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: ' Grapes ',
},{
id:2,
Name: ' Mango ',
},{
id:3,
name: ' Papaya ',
},{
id:4,
name: ' Durian ',
}],
peopledata:[{
Id:1,
name: ' Xiao Ying ',
},{
id:2,
name: ' Hover ',
},{
id:3,
name: ' Empty Nest Youth Three ',
},{
Id:3,
name: ' One throw ',
}]
}} </script>

The above is a small set to introduce the vue.js implementation of drag-and-drop effect of the example, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!