muuri vue

muuri-vue-demo

<template>

    <div class="container">

        <div class="row">
            <div class="edit-bar">
                <button @click="toggle">Edit mode</button>
            </div>
        </div>

        <div class="grid" :class="{ edit: editMode }">
            <div class="item" v-for="card in cards" :key="card.title" >
                <div class="item-content">
<!--                    <button @click="toggle">Edit mode</button>-->

                    <!-- Safe zone, enter your custom markup -->
                    <!-- Safe zone ends -->
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    import Muuri from 'muuri';
    import axios from "axios";

    export default {
        name: "MuuriGrid",

        data() {
            return {
                grid: null,
                cards: [],
                editMode: false,
            }
        },

        created() {
            self = this
        },

        mounted() {
            this.fetchItems();
        },

        watch: {
            isActive: function () {
                console.log(this.editMode)
            },
        },

        methods: {

            fetchItems() {

                axios.get('/api/overview')
                    .then((res) => {
                        this.cards = res.data.cards
                        this.$nextTick(function () {
                            this.createGrid()

                        });
                    });
            },

            createGrid() {
                this.grid = new Muuri('.grid', {
                    items: '.item',
                    dragEnabled: this.editMode,
                    dragPlaceholder: {
                        enabled: true,
                        createElement: function (item) {
                            return item.getElement().cloneNode(true);
                        },
                        onCreate: null,
                        onRemove: null,
                    },
                    dragSortHeuristics: {
                        sortInterval: 10,
                        minDragDistance: 5,
                        minBounceBackAngle: Math.PI / 2
                    },
                });
            },

            toggle() {
                this.editMode = !this.editMode;

                this.grid.destroy();
                this.$nextTick(function () {
                    this.createGrid()
                });

                // this.editMode = !this.editMode;
            },

        },
    }
</script>

<style scoped>
    .edit-bar {
        background: gainsboro;
        border: 2px dashed gray;
    }

    .grid.edit {
        /*background: black;*/
    }

    .grid.edit .item {
         cursor:move;
         cursor:grab;
         cursor:-webkit-grab;
        opacity: .6;
    }

    .grid {
        position: relative;
    }
    .item {
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
        margin: 5px;
        z-index: 1;
        background: #000;
        color: #fff;
    }

    .item.muuri-item-dragging {
        z-index: 3;
    }
    .item.muuri-item-releasing {
        z-index: 2;
    }
    .item.muuri-item-hidden {
        z-index: 0;
    }

    .item.muuri-item-placeholder {
        z-index: 2;
        margin: 0;
        opacity: 0.5;
        border-style: dashed;
    }

    .item-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
</style>











/// 2

<template>

    <div class="container">

        <div class="p-3 mb-sm-4">
            <div class="d-sm-flex align-items-center justify-content-between mg-b-20 mg-lg-b-25 mg-xl-b-30">

                <div>

                </div>

                <div class="d-none d-md-block">
                    <button class="btn btn-sm pd-x-15 btn-primary btn-uppercase mg-l-5" @click.prevent="toggle">
                        <i data-feather="file" class="wd-10 mg-r-5"></i>
                        Edit Layout
                    </button>
                </div>

            </div>
        </div>

        <div class="grid" :class="{ edit: editMode }">
            <div class="col-sm-6 col-lg-3 mt-2 mb-2 item" v-for="card in cards" :key="card.title" >
                <div class="item-content card">
                    <div class="card-body">
                        <h6>{{card.name}}</h6>
                        <h3 class="card-text" v-if="card.type ==='value'">{{card.value}}</h3>
                        <div class="card-chart" v-else>
                        </div>
                    </div>
<!--                    <button @click="toggle">Edit mode</button>-->

                    <!-- Safe zone, enter your custom markup -->
                    <!-- Safe zone ends -->
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import Muuri from 'muuri';
    import axios from "axios";
    import DashboardSettings from "./DashboardSettings";
    import Chart from "./Chart";

    export default {
        name: "MuuriGrid",
        components: {DashboardSettings, 'chart-card': Chart},
        data() {
            return {
                grid: null,
                cards: [],
                editMode: false,
            }
        },

        created() {
            self = this
        },

        mounted() {
            this.fetchItems();
        },

        watch: {
            isActive: function () {
                console.log(this.editMode)
            },
        },

        methods: {

            fetchItems() {
                axios.get('/api/dashboard')
                    .then((res) => {
                        this.cards = res.data.cards
                        this.$nextTick(function () {
                            this.createGrid()
                        });
                    });
            },

            createGrid() {
                this.grid = new Muuri('.grid', {
                    items: '.item',
                    dragEnabled: this.editMode,
                    // dragPlaceholder: {
                    //     enabled: true,
                    //     createElement: function (item) {
                    //         return item.getElement().cloneNode(true);
                    //     },
                    //     onCreate: null,
                    //     onRemove: null,
                    // },
                    dragSortHeuristics: {
                        sortInterval: 10,
                        minDragDistance: 5,
                        minBounceBackAngle: Math.PI / 2
                    },
                });
            },

            toggle() {
                this.editMode = !this.editMode;
                console.log(this.grid.getItems())
                console.log(this.cards);
                this.grid.destroy();
                this.$nextTick(function () {
                    this.createGrid()
                });

                // this.editMode = !this.editMode;
            },



        },
    }
</script>

<style scoped>
    .edit-bar {
        background: gainsboro;
        border: 2px dashed gray;
    }

    .grid.edit {
        /*background: black;*/
    }

    .grid.edit .item {
         cursor:move;
         cursor:grab;
         cursor:-webkit-grab;
        opacity: .6;
    }

    .grid {
        position: relative;
    }
    .item {
        display: block;
        position: absolute;
        /*width: 100px;*/
        /*height: inherit;*/
        /*margin: 5px;*/
        z-index: 1;
        /*background: #000;*/
        /*color: #fff;*/
    }

    .item.muuri-item-dragging {
        z-index: 3;
    }
    .item.muuri-item-releasing {
        z-index: 2;
    }
    .item.muuri-item-hidden {
        z-index: 0;
    }

    .item.muuri-item-placeholder {
        z-index: 2;
        margin: 0;
        opacity: 0.5;
        border-style: dashed;
    }

    .item-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
</style>