在用这个插件的时候有遇到不少将点击事件当成是拖拽事件,并且使用
.stop.prevent
也无法阻止的情况,其中个人认为方法二最有效.
- 方法一:添加
delay="1"
,这个功能是鼠标按下后多久可以拖拽,主要针对部分安卓机.- 方法二:
:fallbackTolerance="3"
,拖拽之前应该移动的px,主要针对新版本iOS- 方法三:将需要拖拽的内容写成组件,点击时通过
$emit
告诉父组件并处理业务.
<Draggable
v-model="selectedList"
@change="changeSelectedList"
handle=".selectDataEach"
:delay="1"
:fallbackTolerance="3"
>
<transition-group tag="div" class="flex_items_center warp">
<template v-for="(selectItem, selectIndex) in selectedList">
<SelectDataEach
:key="'selectedList' + selectIndex"
@delect="deleteSelectItem(selectItem.reportType, selectIndex)"
>
{
{ selectItem.reportTitle }}
</SelectDataEach>
</template>
</transition-group>
</Draggable>
<template>
<div>
<div class="radius_10 fff selectDataEach" @click.stop.prevent="handleSeletct">
<slot />
<i><img src="@/assets/images/dataCenter/delete.png" alt="" /></i>
</div>
</div>
</template>
<script>
export default {
methods: {
handleSeletct() {
this.$emit("delect");
},
},
};