ddddd

当前位置：码农之家-程序员学习> HTML5> vuedraggable拖拽生成页面---简单Demo

vuedraggable拖拽生成页面---简单Demo

作者：程序员11 时间：2023-06-21 人气：360 QQ交流群\邮箱:1003265987@qq.com

vuedraggable拖拽生成页面---简单Demo

要展示的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuedrag</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <style>
        #app {
            display: flex;
            justify-content: space-around;
        }
        .li2,
        .li {
            background-color: powderblue;
            width: 100px;
            margin: 10px auto;
            padding: 20px;
            position: relative;
        }
        .li2 {
            background-color: pink;
        }
        .right {
            width: 200px;
            /* 保证list2没有内容时仍然可拖拽左边模块内容 */
            min-height: 500px;
            background-color: #eee;
        }
        .delbtn {
            width: 24px;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
            line-height: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 左侧菜单区 -->
        <draggable v-model="list1" draggable=".li" v-bind="dragOptions"
            :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}">
            <div v-for="d in list1" :key="d.id" :class="{'disabled':d.disabled}">{{d.name}}</div>
        </draggable>
        <!-- 右侧页面生成去 -->
        <draggable group="field" v-bind="dragOptions" :list="list2" @change="toChange">
            <div v-for="(d,index) in list2" :key="'r'+index">
                <span>{{d.name}}</span>
                <div @click="del(index)">删除</div>
            </div>
        </draggable>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                dragOptions: {
                    animation: 500,
                    filter: '.disabled' //class为disabled时不可拖拽
                },
                list1: [
                    //   重复拖动相同元素时key重复，需要处理
                    { name: "头部", id: 1, disabled: true },    //设置第一项不可拖动
                    { name: "标题", id: 2 },
                    { name: "图片", id: 3 },
                    { name: "分割线", id: 4 }
                ],
                list2: []
            },
            methods: {
                toChange(e) {
                    console.log(e)
                    if (e.added) {
                        console.log(this.list2)
                    }
                },
                del(idx) {
                    this.list2.splice(idx, 1)
                }
            }
        })
    </script>
</body>
</html>
-----------------------------------
©著作权归作者所有：来自51CTO博客作者lMovIKE的原创作品，请联系作者获取转载授权，否则将追究法律责任
vuedraggable拖拽生成页面---简单Demo
https://blog.51cto.com/u_15284202/5350034

复制到空的html直接查看效果

链接：https://blog.51cto.com/u_15284202/5350034

本文链接:https://www.1024dongnn.com/html5/859.html

温馨提示:

欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。