template模板
<transition-group tag="div" class="container">
<div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)" >
</div>
</transition-group>
script:
<script>
export default {
name: 'Toolbar',
data () {
return {
items: [
{ key: 1, color: '#ffebcc'},
{ key: 2, color: '#ffb86c'},
{ key: 3, color: '#f01b2d'}
],
dragging: null
}
},
methods:{
handleDragStart(e,item){
this.dragging = item;