vddl-draggable的callback问题

[lijiahao8898]

。 每次拖动一个drag元素。所有的drag回调全部调用了。是这样的嘛 还是我使用的方式不太正确。。。

[hejianxian]

@lijiahao8898

请问具体的问题是什么？vdd-list 和 vddl-draggable的回调说明具体看文档吧。

[lijiahao8898]

我拖动当前的vddl-draggable。只会触发当前的vddl-draggable，还是所有的vddl-draggable呢。

<template>
    <div class="vue-component">
        <div v-for="list in lists">
            <vddl-list :list="list" :horizontal="false">
                <vddl-draggable v-for="(item, index) in list" :key="item.id" :draggable="item" :index="index"
                                :wrapper="list" effect-allowed="copy" :moved="moved()" :cancelled="cancelled()"
                                :dragstart="dragstart()" :dragend="dragend()" :selected="selected()">
                    {{item.name}}
                </vddl-draggable>
            </vddl-list>
        </div>
    </div>
</template>

我回调是写在template和methods里面。

methods: {
            moved: function () {
                console.log('moved');
            },
            cancelled: function () {
                console.log('cancelled');
            },
            dragstart: function () {
                console.log('dragstart');
            },
            dragend: function () {
                console.log('dragend');
            },
            selected: function () {
                console.log('selected')
            }
        }

[hejianxian]

触发你拖动的那个元素

[lijiahao8898]

我回调方法都是写在 vddl-draggable 里面的，譬如 :moved="moved()" 。写法上是不是不正确。我看了您的文档。里面直说回调的方法。没有说如何调用的。

[hejianxian]

看看这个 simple demo

[lijiahao8898]

老哥，是 :moved="moved()" 和 :moved="moved" 的区别。后者就对了。我之前使用的是前者。我在您的 simple demo 里面。将回调方法 :dragstart="handleDragstart 替换成 :dragstart="handleDragstart() 也会出现我的问题。但是，这两个的写法不是应该一样的嘛？

[hejianxian]

你的写法，在初始化的时候，就会被执行，而作为callback，是从vddl内部在对应阶段时触发，所以你只需要传入方法名即可。

[lijiahao8898]

嗯。我这边又有个疑问。 在 vddl-list 加上 :drop="handleDrop" 的callback。元素就无法拖拽到另外的一边了。在 simple demo 中也有这样的问题。

[hejianxian]

如果添加了这个回调，那么vddl内部不会帮你裁剪数组，只会返回一些数据，这个操作需要你自己进行。

[lijiahao8898]

@hejianxian 好的。非常感谢您的耐心解答。