在vue
中使用拖拽事件,可以直接绑定使用,例如:
.....
<div
draggable="true"
@drag='drags($event, "42225")'
@dragstart='dragstart($event)'
>
拖拽
</div>
.....
但在使用 iview
的组件的时候这么写是没有效果的, 例如:
<Row>
<Col span='24'>
<Button
draggable="true"
@drag='drags($event, "45")' // 无效写法
@:dragstart='dragstart($event)' // 无效写法
@dragleave='dragleave($event)' // 无效写法
@dragend='dragend($event)' // 无效写法
type="primary">Primary</Button>
</Col>
</Row>
其原因就是因为 Button
是个组件,对其绑定拖拽事件需要使用 .native
修饰,并且需要使用 v-on
来绑定
如下:
<Row>
<Col span='24'>
<Button
draggable="true"
v-on:drag.native='drags($event, "45")'
v-on:dragstart.native='dragstart($event)' // 正确使用
v-on:dragleave.native='dragleave($event)'
v-on:dragend.native='dragend($event)'
type="primary">Primary</Button>
</Col>
</Row>