当前位置：网站首页>拖动拖动拖动

拖动拖动拖动

2022-06-24 19:29:00 【xiexuzhao】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css/comm.css" rel="stylesheet" type="text/css" />
    <link href="js/element/css/2.15.7/index.min.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <div class="left disabled">
            <vuedraggable v-model="list" :disabled="!enabled" :group="{ name: 'course', pull: 'clone' }">
                <transition-group type="transition">
                    <div v-for="item in list" :key="item" class="item">{ {item}}</div>
                </transition-group>
            </vuedraggable>
        </div>
        <div class="right">
            <vuedraggable v-model="list2" :group="{ name: 'course'}">
                <!--<div v-for="item in list2" :key="item" class="item">{ {item}}</div>-->
                <div v-for="item in list2" :key="item" class="item">
                    <component :is="item" v-model="form[item]" v-bind="attrs">{ {item}}</component>
                </div>
            </vuedraggable>
        </div>
        <div style="clear:both"></div>
        <script type="text/x-template" id="temp">
            <div class="row">
                <div class="col-left">
                    <vuedraggable v-model="listitem2" :group="{name: 'course'}">
                        <div v-for="item in listitem2" :key="item" class="item">
                            <component :is="item" v-model="form[item]" v-bind="attrs">{ {item}}</component>
                        </div>
                    </vuedraggable>
                </div>
                <div class="col-left">
                    <vuedraggable v-model="listitem2" :group="{name: 'course'}">
                        <div v-for="item in listitem2" :key="item" class="item">
                            <component :is="item" v-model="form[item]" v-bind="attrs">{ {item}}</component>
                        </div>
                    </vuedraggable>
                </div>
            </div>
        </script>
    </div>
</body>
<!--
{ {item}}-->
<script src="js/vue-2.6.14/vue.js"></script>
<script src="js/element/js/2.15.7/index.min.js"></script>
<!--<script src="js/vue-2.6.14/vue.min.js" type="text/javascript"></script>-->
<script src="js/Sortable-1.15.0/Sortable.min.js" type="text/javascript"></script>
<script src="js/Vue.Draggable-2.24.3/vuedraggable.umd.js" type="text/javascript"></script>
<script>
    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    };
    Vue.component('layout', {
        template: "#temp",
        components: {
            vuedraggable
        },
        //components: { vuedraggable },
        data() {
            return {
                form: {},
                attrs: { 'type': 'success' }, // , disabled: true
                listitem2: [],

            }
        }
    })


    /*    app.component("draggable", window.vuedraggable);*/

    new Vue({
        el: '#app',
        components: { vuedraggable },
        created: function () {

        },
        data: function () {
            return {
                listitem1: [],
                listitem2: [],
                enabled: true,
                form: {},
                attrs: { 'type': 'success' }, // , disabled: true
                list: ['layout', 'el-rate', 'el-tag', 'el-button', 'el-switch', 'el-slider', 'el-time-select', 'el-input'],
                list2: [],
            }
        },
        methods: {

        }
    })
</script>
</html>

原网站

版权声明
本文为[xiexuzhao]所创，转载请带上原文链接，感谢
https://blog.csdn.net/xiexuzhao/article/details/125425274

边栏推荐

猜你喜欢

随机推荐