Vue.draggable: set scroll-sensitivity="190" :force-fallback="true" can't run onclick event

Created on 16 Oct 2019  路  4Comments  路  Source: SortableJS/Vue.Draggable

I read this page
https://jsfiddle.net/dede89/s25p19hj/
add scroll-sensitivity="190" :force-fallback="true"
item can't onclick event
My Code:
Code Begin:

<draggable  :animation="400" :scroll-sensitivity="250" :force-fallback="true" @start="filedStart2" :list = "t.filedList" @end="filedEnd" group="testList" :disabled="editable">
                                <div v-for="(f,fi) in t.filedList" :id="'filed'+f.archiveDetailUUID" :sort="true" class="file_width">
                                    <div class="f_file_a file_width file_hover hover_close_vx1"
                                         style="cursor: pointer;" @click="toShowPdf(f)" >
                                        <div class="ffa_child border_grey">                                            
                                            <img style="width: 75px; height: 85px;" class="img_block" :src="'/static/img/pdf_icon.png'">
                                        </div></div>
                                </div>
                            </draggable>

Code End:

@click="toShowPdf(f)" can't run toShowPdf this function

Most helpful comment

I Fix it,thanks ,this is Code:
<draggable :animation="400" :scroll-sensitivity="250" :fallback-tolerance="1" :force-fallback="true" :list = "t.filedList" @start="filedStart2" @end="filedEnd" group="testList" :disabled="editable"> <div v-for="(f,fi) in t.filedList" :id="'filed'+f.archiveDetailUUID" :sort="true" class="file_width"> <div @click="toShowPdf(f)" > <div class="ffa_child border_grey"> <img style="width: 75px; height: 85px;" class="img_block" :src="'/static/img/pdf_icon.png'"> </div> </draggable>

All 4 comments

Use handle option to make only a part of the item draggable and preseve original event on remaining elment.

I Fix it,thanks ,this is Code:
<draggable :animation="400" :scroll-sensitivity="250" :fallback-tolerance="1" :force-fallback="true" :list = "t.filedList" @start="filedStart2" @end="filedEnd" group="testList" :disabled="editable"> <div v-for="(f,fi) in t.filedList" :id="'filed'+f.archiveDetailUUID" :sort="true" class="file_width"> <div @click="toShowPdf(f)" > <div class="ffa_child border_grey"> <img style="width: 75px; height: 85px;" class="img_block" :src="'/static/img/pdf_icon.png'"> </div> </draggable>

It is helpful to me, successfully solved my problem, thank you!

@smartwei thanks
:fallback-tolerance="1"
Solved my problem

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Leadaxe picture Leadaxe  路  3Comments

parthibeyond picture parthibeyond  路  3Comments

Nrqz picture Nrqz  路  3Comments

fedenko picture fedenko  路  3Comments

clemsontiger picture clemsontiger  路  3Comments