在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>