fix: DRAG Only possible with Button component or in edit description component.

This commit is contained in:
Paolo Arena
2019-02-20 17:54:48 +01:00
parent 6a99f22bf3
commit 77568f02f5
6 changed files with 132 additions and 60 deletions

View File

@@ -7,20 +7,26 @@
<div class="categorytitle">{{ getCategory() }}</div>
</div>
<q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo(true)"/>
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
<div class="drag">
<div>
<!--<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"-->
<!--@start="onStart" @end="onEnd" class="dragArea">-->
<!--<transition-group :name="mytypetransgroup">-->
<!--<div :id="getmyid(mytodo._id)" v-for="(mytodo, index) in todos_arr" :key="mytodo._id" class="myitemdrag"-->
<!--draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"-->
<!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
<!--@start="onStart" @end="onEnd" class="dragArea">-->
<!--<transition-group :name="mytypetransgroup">-->
<!--<div :id="getmyid(mytodo._id)" v-for="(mytodo, index) in todos_arr" :key="mytodo._id" class="myitemdrag"-->
<!--draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"-->
<!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
<q-infinite-scroll :handler="loadMoreTodo" :offset="7">
<div class="container" v-dragula="todos_arr" drake="first">
<div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in todos_arr" :key="mytodo._id" class="myitemdrag">
<div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in showingDataTodo"
:key="mytodo._id" class="myitemdrag">
<div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
<div v-if="(prior !== mytodo.priority) && !mytodo.completed"
:class="getTitlePriority(mytodo.priority)">
<label>{{getPriorityByInd(mytodo.priority)}}</label>
</div>
<div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
@@ -29,29 +35,30 @@
</div>
<SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
:itemtodo='mytodo' />
:itemtodo='mytodo'/>
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
</div>
</div>
</div>
<!--</transition-group>-->
</q-infinite-scroll>
<!--</transition-group>-->
<!--</draggable>-->
</div>
<q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
<q-input v-if="todos_arr.length > 0" ref="insertTaskBottom" v-model="todobottom" inverted :float-label="$t('todo.insertbottom')"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/>
v-on:keyup.enter="insertTodo(false)"/>
<!--{{ tmpstrTodos }}-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>-->
<!--</div>-->
<!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
@@ -60,9 +67,9 @@
<!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
<!--<div class="flex-item btn-item">-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>&ndash;&gt;-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>&ndash;&gt;-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
<!--</div>-->
</div>