- todo: design: flexbox, dragging, icons, priority.

src/components/todos/todo/todo.vue

@@ -7,9 +7,18 @@
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertTodo"/>
 
-            <SingleTodo @event="deleteitem" @eventupdate="updateitem" :itemtodo='mytodo' v-for="mytodo of todos_arr" :key="mytodo.id">
 
-            </SingleTodo>
+            <div class="flex-container">
+                <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}" @start="onStart" @end="onEnd">
+                    <transition-group>
+                        <SingleTodo @event="deleteitem" @eventupdate="updateitem" :itemtodo='mytodo'
+                                    v-for="mytodo of todos_arr" :key="mytodo.id" class="myitemdrag">
+                        </SingleTodo>
+                    </transition-group>
+                </draggable>
+            </div>
+
+            <!--<div v-for="element in todos_arr" :key="element.id">{{element.descr}}</div>-->
 
         </div>
     </q-page>
@@ -18,3 +27,6 @@
 </template>
 <script lang="ts" src="./todo.ts">
 </script>
+<style lang="scss" scoped>
+    @import './todo.scss';
+</style>