surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drag & Drop hand made... but don't working with the touch

Browse Source
This commit is contained in:
Paolo Arena
2019-02-19 18:44:48 +01:00
parent ec49343556
commit 1eca13c27f
13 changed files with 259 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/todos/todo/todo.scss
View File

@@ -2,6 +2,7 @@
background-color: rgb(250, 250, 250);
padding: 5px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
@@ -14,7 +15,7 @@
.myitemdrag {
padding: 2px;
margin-top: 4px;
//margin-top: 4px;
border-width: 1px 0px 0px 0px;
//border: solid 1px #ccc;
border-style: solid;
@@ -76,3 +77,28 @@
font-size: 0.7rem;
font-weight: 350;
}
.draggatodraggato2 {
display: inline-block;
}
.non-draggato {
display: none;
}
@keyframes fadeIn {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 0.3;
}
}
.divdrag{
animation: fadeIn 0.2s ease-in 1 forwards;
min-height: 50px;
background-color: #9f9f9f;
}

69
src/components/todos/todo/todo.ts
View File

@@ -17,6 +17,8 @@ import draggable from 'vuedraggable'
import VueIdb from 'vue-idb'
// import 'statics/css/dragula.css'
import globalroutines from '../../../globalroutines/index'
import $ from 'jquery'
@@ -43,9 +45,11 @@ export default class Todo extends Vue {
itemDragEnd: any = null
selrowid: number = 0
polling = null
mytypetransgroup: string = 'flip-list'
mytypetransgroup: string = '' // 'flip-list'
tmpstrTodos: string = ''
loadDone: boolean = false
public dragging: number
public itemdrag: any = {}
fieldtochange: String [] = ['descr', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'id_next', 'pos', 'enableExpiring', 'progress']
@@ -60,6 +64,7 @@ export default class Todo extends Vue {
console.log('drag = ' + this.drag)
}
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: any) {
// Some action
@@ -68,9 +73,14 @@ export default class Todo extends Vue {
@Watch('$route.params.category') changecat() {
// console.log('changecat')
this.mytypetransgroup = 'nessuno'
// this.mytypetransgroup = ''
this.updatetable(false, '$route.params.category').then(() => {
this.mytypetransgroup = 'crossfade'
const mythis = this
setTimeout(function () {
// mythis.mytypetransgroup = 'crossfade'
}, 1000)
})
}
@@ -292,7 +302,10 @@ export default class Todo extends Vue {
}
async onEnd(itemdragend) {
console.log('newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
console.log('3) newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
// MOVE
this.todos_arr.splice(itemdragend.newIndex, 0, this.todos_arr.splice(itemdragend.oldIndex, 1)[0])
if (itemdragend.newIndex === itemdragend.oldIndex)
return // If nothing change, exit
@@ -616,7 +629,6 @@ export default class Todo extends Vue {
console.log('deleteitem: KEY = ', id)
let myobjtrov = this.getElemById(id)
if (myobjtrov !== null) {
@@ -648,8 +660,8 @@ export default class Todo extends Vue {
this.updatetable(true, 'deleteitem')
}).catch((error) => {
console.log('err: ', error)
})
console.log('err: ', error)
})
// 3) Delete from the Server (call)
this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, myobjtrov, id, true)
@@ -908,4 +920,47 @@ export default class Todo extends Vue {
Todos.actions.waitAndcheckPendingMsg()
}
dragStart(which, ev) {
this.itemdrag.indTemp = which
console.log('1) DRAG INIZIO: ', which)
this.itemdrag.oldIndex = which
this.dragging = which
}
public randomHexColor() {
return Math.random().toString(16).slice(2, 8)
}
dragEnter(index, ev) {
if (this.itemdrag.indTemp !== index) {
console.log(`[${index}] DRAG ENTER`)
this.itemdrag.indTemp = index
this.getItemDrag(index).addClass('draggato2').removeClass('non-draggato')
}
}
getItemDrag(index) {
return $('div[name=REF' + index + ']')
}
dragLeave(index, ev) {
if (this.itemdrag.indTemp !== index) {
this.getItemDrag(index).addClass('non-draggato').removeClass('draggato')
}
}
dragEnd(ev) {
this.dragging = -1
}
dragFinish(to, ev) {
this.itemdrag.indTemp = -1
this.getItemDrag(to).addClass('non-draggato').removeClass('draggato')
console.log('2) DRAG FINE: ', to)
this.itemdrag.newIndex = to
this.onEnd(this.itemdrag)
}
}

40
src/components/todos/todo/todo.vue
View File

@@ -10,14 +10,12 @@
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
<div class="drag">
<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
@start="onStart" @end="onEnd" class="dragArea">
<!--<transition-group :name="mytypetransgroup">-->
<div style="display: none">{{counter = 0}} </div>
<div :id="getmyid(mytodo._id)" :key="mytodo._id" v-for="mytodo in todos_arr" class="myitemdrag">
<!--<div v-if="isTodoByElem(mytodo)" style="display: none">{{counter++ = (mytodo.counter === undefined) ? 0: mytodo.counter++}} </div>-->
<div v-if="isTodoByElem(mytodo)" style="display: none">{{counter++, mytodo.counter = counter}} </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)" >
<div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
<label>{{getPriorityByInd(mytodo.priority)}}</label>
@@ -27,13 +25,15 @@
<div style="display: none">{{ priorcomplet = true }}</div>
</div>
<SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
@deselectAllRows="deselectAllRows"
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
:itemtodo='mytodo' />
<div :name="`REF${index}`" class="divdrag non-draggato"></div>
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
</div>
<!--</transition-group>-->
</draggable>
</transition-group>
<!--</draggable>-->
</div>
@@ -42,18 +42,18 @@
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/>
{{ tmpstrTodos }}
<!--{{ 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>
</div>
<!--<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>-->
<!--</div>-->
<!--<q-input v-model="testPao" float-label="testPao"/>-->
<q-input v-model="todos_changed" float-label="todos_changed"/>
<!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
<!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>
<!--<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;-->