mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-03 21:37:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

some basic drag and drop workin

Browse Source
This commit is contained in:
vabene1111
2020-06-02 22:52:28 +02:00
parent 84ad88b30b
commit 8ffc6a0236
1 changed files with 31 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
cookbook/templates/meal_plan.html
View File

@@ -57,42 +57,54 @@
</table> </table>
[[plan_entries]] [[plan_entries]]
<h1>drag n drop</h1>
</div>
<template>
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3">
<h3>Draggable 1</h3> <h3>Draggable 1</h3>
<draggable class="list-group" :list="list1" group="people" @change="log"> <draggable class="list-group" :list="plan_entries" group="people" @change="log">
<div <div
class="list-group-item" class="list-group-item"
v-for="(element, index) in list1" v-for="(element, index) in plan_entries"
:key="element.name" :key="element.title"
> >
{{ element.name }} {{ index }} [[element]]
</div> </div>
</draggable> </draggable>
</div> </div>
<div class="col-3"> <div class="col-3">
<h3>Draggable 2</h3> <h3>Draggable 2</h3>
<draggable class="list-group" :list="list2" group="people" @change="log"> <draggable class="list-group" :list="meal_types" group="people" @change="log">
<div <div
class="list-group-item" class="list-group-item"
v-for="(element, index) in list2" v-for="(element, index) in meal_types"
:key="element.name" :key="element.name"
> >
{{ element.name }} {{ index }} [[element]]
</div> </div>
</draggable> </draggable>
</div> </div>
<rawDisplayer class="col-3" :value="list1" title="List 1"/> <div class="col-3">
<h3>Draggable 2</h3>
<rawDisplayer class="col-3" :value="list2" title="List 2"/> <draggable class="list-group" :list="list3" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list3"
:key="element.name"
>
[[element]]
</div> </div>
</template> </draggable>
</div>
</div>
</div>
<script type="application/javascript"> <script type="application/javascript">
var week = moment().format('W') var week = moment().format('W')
@@ -104,7 +116,9 @@
data: { data: {
days: moment.weekdays(), days: moment.weekdays(),
plan_entries: [], plan_entries: [],
meal_types: [] meal_types: [],
list3: [],
meal_plan: null,
}, },
mounted: function () { mounted: function () {
this.getPlanEntries(); this.getPlanEntries();
@@ -138,51 +152,11 @@
buildGrid: function () { buildGrid: function () {
}, },
log: function (evt) {
console.log(evt)
}
} }
}); });
import draggable from 'vuedraggable';
export default {
name: "two-lists",
display: "Two Lists",
order: 1,
components: {
vuedraggable
},
data() {
return {
list1: [
{name: "John", id: 1},
{name: "Joao", id: 2},
{name: "Jean", id: 3},
{name: "Gerard", id: 4}
],
list2: [
{name: "Juan", id: 5},
{name: "Edgard", id: 6},
{name: "Johnson", id: 7}
]
};
},
methods: {
add: function () {
this.list.push({name: "Juan"});
},
replace: function () {
this.list = [{name: "Edgard"}];
},
clone: function (el) {
return {
name: el.name + " cloned"
};
},
log: function (evt) {
window.console.log(evt);
}
}
};
</script> </script>
{% endblock %} {% endblock %}