Javascript

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

本文主要是介绍vuedraggable拖拽生成页面---简单Demo，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!DOCTYPE html>
<html lang="en">
<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="li" :class="{'disabled':d.disabled}">{{d.name}}</div>
        </draggable>
        <!-- 右侧页面生成去 -->
        <draggable class="right" group="field" v-bind="dragOptions" :list="list2" @change="toChange">
            <div v-for="(d,index) in list2" :key="'r'+index" class="li2">
                <span>{{d.name}}</span>
                <div class="delbtn" @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>

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

效果演示

这篇关于vuedraggable拖拽生成页面---简单Demo的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航