vue css 拖拽,div拖拽互换位置（vue）

template模板

draggable="true"

@dragstart="handleDragStart($event, item)"

@dragover.prevent="handleDragOver($event, item)"

@dragenter="handleDragEnter($event, item)"

@dragend="handleDragEnd($event, item)" >

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;

},

handleDragEnd(e,item){

this.dragging = null

},

//首先把div变成可以放置的元素，即重写dragenter/dragover

handleDragOver(e) {

e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!

},

handleDragEnter(e,item){

e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件

if(item === this.dragging){

return

}

const newItems = [...this.items]

console.log(newItems)

const src = newItems.indexOf(this.dragging)

const dst = newItems.indexOf(item)

newItems.splice(dst, 0, ...newItems.splice(src, 1))

this.items = newItems

}

}

}

.container{

80px;

height: 300px;

position: absolute;

left: 0;

display:flex;

flex-direction: column;

padding: 0;

}

.item {

margin-top: 10px;

transition: all linear .3s

}