vue實現拖放效果
html：
<template>
<div class='drag-content'>
<div class='project-content'>
<div v-for='(tag,index) in tags' class="item-box">
<div @click.stop="hadnlerClick" class='select-item' draggable='true' :index="index" @dragstart='drag($event)' @drop='drop($event)' @dragover='allowDrop($event)'>{{tag.crafworkName}}</div>
<i class="iconfont icon-xiangyou" style="margin-right:15px;color:#999;" v-show="index<tags.length-1"></i>
</div>
</div>
</div>
</template>
js:
import {upStruct} from './api.js'
export default {
components: {
tableGroup
},
data() {
return {
oldIndex:-1,
newIndex:-1,
formData:{}
}
},
props:{
tags:{
default:[]
},
},
methods: {
drag(event){
this.oldIndex=event.target.getAttribute('index')
},
drop(event){
this.newIndex=event.target.getAttribute('index')
var newItem=JSON.parse(JSON.stringify(this.tags[this.oldIndex]))
this.tags.splice(this.oldIndex,1)
this.tags.splice(this.newIndex,0,newItem)
},
allowDrop(event){
event.preventDefault();
},
}
}
style:
<style scoped>
.orderImg{
width: 475px;
margin: 40px auto 50px;
position: relative;
}
.orderImg img{
width: 100%;
}
.orderImg .desc{
font-size:14px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(51,51,51,1);
position: absolute;
top: 120%;
}
.orderImg .order-1{
left: -40px;
}
.orderImg .order-2{
left: 210px;
}
.orderImg .order-3{
left: 420px;
width: 200px;
}
.select-item {
border: rgba(42,147,255,1) 1px solid;
display: inline-block;
text-align: center;
border-radius: 3px;
margin-right: 10px;
cursor:pointer;
padding: 6px 20px;
color: rgba(42,147,255,1);
}
.item-box{
display: inline-block;
margin-top:20px;
}
.cursored{
cursor: default;
}
.project-content,.people-content {
margin: 30px 50px;
}
</style>