vuedraggable的使用

最新推荐文章于 2025-03-26 09:52:52 发布
原创最新推荐文章于 2025-03-26 09:52:52 发布 · 246 阅读
CC 4.0 BY-SA版权
文章标签：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue.draggable clone例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <style>
        .itxst {
            margin: 10px;
            text-align: left;
        }

        .col {
            width: 40%;
            flex: 1;
            padding: 10px;
            border: solid 1px #eee;
            border-radius: 5px;
            float: left;
        }

        .col+.col {
            margin-left: 10px;
        }

        .item {
            padding: 6px 12px;
            margin: 0px 10px 0px 10px;
            border: solid 1px #eee;
            background-color: #f1f1f1;
            text-align: left;
        }

        .item+.item {
            border-top: none;
            margin-top: 6px;
        }

        .item:hover {
            background-color: #fdfdfd;
            cursor: move;
        }

        .item2 {
            padding: 6px 12px;
            margin: 0px 10px 0px 10px;
            border: solid 1px #eee;
            background-color: pink;
            text-align: left;
        }

        .item2+.item2 {
            border-top: none;
            margin-top: 6px;
        }

        .item2:hover {
            outline: solid 1px #ddd;
            cursor: move;
        }
    </style>
</head>
<!-- 从以下  来看      end1  指的是从左往右拖动时的触发的事件       end2  指的是 -->

<body style="padding:10px;">
    <div id="app">
        <!--使用draggable组件-->
        <div class="itxst">
            <div style="padding-left:6px">clone例子,左边往右边拖动试试看</div>
            <div class="col">
                <draggable v-model="arr1" @end="end1" :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
                    animation="300" :move="onMove" @start="start">
                    <transition-group>
                        <div :class="item.id==1?'item forbid':'item'" v-for="(item,index) in arr1" :key="index">
                            {{item.name}}
                        </div>
                    </transition-group>
                </draggable>
            </div>
            <div class="col">
                <draggable v-model="arr2" @end="end2" group="itxst" animation="300" :move="onMove">
                    <transition-group>
                        <div :class="item.id==12?'item2 forbid':'item2'" v-for="item in arr2" :key="item.id">
                            {{item.name}}</div>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </div>
    <script>
        // debugger;
        Vue.component('vuedraggable', window.vuedraggable.name)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable,
            },
            data() {
                return {
                    //定义要被拖拽对象的数组
                    arr1: [
                        { name: 'www.itxst.com（不允许停靠）' },
                        { name: 'www.jd.com' },
                        { name: 'www.baidu.com' },
                        { name: 'www.google.com' },
                        { name: 'www.taobao.com（不允许拖拽）' }
                    ],
                    arr2: [
                        { id: 11, name: '常用菜单' },
                    ],
                    moveId: -1
                };
            },
            methods: {
                //随机产生id
                generateId() {
                    return Math.floor(Math.random() * 100000 + Math.random() * 20000 + Math.random() * 5000);
                },
                //拖拽开始
                start(e) {
                    // 当拖拽开始的时候  如果没有id  则自动生成一个id
                    if (!e.item._underlying_vm_.id) {
                        e.item._underlying_vm_.id = this.generateId()
                    }
                    console.info(e.item._underlying_vm_, '开始拖拽的事件,当前的元素!!')
                },

                //左边往右边拖动时的事件
                end1(e) {
                    console.log(e, '左边=>右边')
                    var that = this;
                    var items = this.arr2.filter(function (m) {
                        return m.id == that.moveId
                    })
                    //如果左边
                    console.info(items.length, '长度')
                    console.info(this.arr2, '当前的数组')
                    console.info(e, '左边=>右边已经拖拽完成!')

                    // delete e.item._underlying_vm_.id
                    // if (items.length < 2) return;
                    // this.arr2.splice(e.newDraggableIndex, 1)
                },


                //右边往左边拖动时的事件
                end2(e) {
                    console.log(e, '右边=>左边')
                    //不在进行右边往左边的拖拽  如果从右边拖到左边  则直接消失
                    var that = this;
                    var items = this.arr1.filter(function (m) {
                        return m.id == that.moveId
                    })
                    //如果左边
                    if (items.length < 2) return;
                    this.arr1.splice(e.newDraggableIndex, 1)
                },

                //move回调方法    return false  为不允许拖拽   return  true  为允许拖拽
                //下面这两个  不允许停靠和不允许拖拽   是指 当被拖拽的元素的id为4或11的时候  是不会被拖动的
                //当被拖拽的元素停靠在的  元素id为1的时候   则不允许停靠  
                onMove(e, originalEvent) {
                    console.info(e.relatedContext.element, '当前拖拽的组件正在进行move运动')
                    this.moveId = e.relatedContext.element.id;
                    //不允许停靠
                    if (e.relatedContext.element.id == 1) return false;
                    //不允许拖拽
                    if (e.draggedContext.element.id == 4) return false;
                    if (e.draggedContext.element.id == 11) return false;
                    return true;
                },
            },
        });


        Array.prototype.filter = Array.prototype.filter || function (func) {
            var arr = this;
            var r = [];
            for (var i = 0; i < arr.length; i++) {
                if (func(arr[i], i, arr)) {
                    r.push(arr[i]);
                }
            }
            return r;
        }
    </script>
</body>

</html>