hejianxian/vddl

🦄 Vue components for modifying lists with the HTML5 drag & drop API.

Vue components for modifying lists with the HTML5 drag & drop API.

💥Warning💥

• 1. Don't set index to the :key, it will cause dragging confusion.

<vddl-list :list="list">
    <vddl-draggable class="panel__body--item" 
      v-for="(item, index) in list" 
      :key="item.id" // It's best to use a unique id. Remember, don't use 'index'.
      ...
      >
      {{item.label}}
    </vddl-draggable>
</vddl-list>

• 2. "[Vue warn]: Duplicate keys detected: 'A-1'. This may cause an update error. "

Why is this wrong? Because in Vue.js v2.5.0 version, The nextTick's implementation has changed, specific can see here. The reason for throwing this error is that when the element is dropped onto the list, a duplicate object is inserted into the array. Now I think this can be done for you. Add a drop event to the vddl-list and add a moved event to the vddl-draggable. Then you need to splice the array manually. See the demo source code

Links

• Documentation
• Online Demo
• Vue drag&drop lists

Features

• Supports VueJs versions 1.0 and 2.0
• Supports all modern browsers and Internet Explorer 9+
• Supports nested lists for building trees and other fancy structures

Touch devices are not supported, because they do not implement the HTML5 drag & drop standard. However, you can use a shim to make it work on touch devices as well.

Installation

npm install --save vddl

# or
yarn add vddl

Usage

import Vue from 'vue';
import Vddl from 'vddl';

Vue.use(Vddl);

Development

# dev
npm install
npm run watch

# build
npm run build

# run example
cd example && npm install
npm run dev

License

MIT

vddl's Issues

Clickable tags

Hi guys,

I've been using this on my project and i was wondering if there is a way that i can click on a tag and perform as if it was dragged on a container also?

Dragged element duplication

I would like to report a bug.

VDDL Version: 0.5.2
Vue Version: 2.3.3

When I drag-and-drop <vddl-draggable> elements within a <vddl-list> too quickly while there is text selected on the webpage, the dragged element sometimes clones itself and replaces a different element in the list.

I have created an example project here, although the bug can occur in any project.

How to reproduce:

1. Create a <vddl-list> and fill it with an arbitrary number of <vddl-draggable> items.
2. Press Ctrl+A to select all text on the page. (I have noticed that the bug is more likely to happen if there is a lot of text selected).
3. Repeatedly drag-and-drop the same item from the list as quickly as possible. It will eventually clone itself by replacing another element in the list (typically the element closest to where you dropped the item).

EDIT: I have moved the link to MediaFire so my Github projects list is not cluttered.

解决key键重复 fix Duplicate keys detected

下载你的包，本地安装完毕，web运行正常，把demo例子拷贝到electron写的容器会报以下错误

Duplicate keys detected: 'Item A1'. This may cause an update error.

很奇怪。。。不知道如果修改组建才不会有这个提示呢？

rm -rf is not a valid command on Windows

I tried to run npm install, but I got an error when it got to the rm -rf dist/ part of the package.json file.

vddl/package.json

Line 11 in 5ffb105

"purge": "rm -rf dist/",

One solution would be to include 'shx' and just prepend it infront of non-windows commands. Like they've done in this commit: https://github.com/ReactiveX/rxjs/pull/1681/files

I could submit a PR with it if you want.

I was planning on trying to fix the duplicate item bug as well (#4).

effect-allowed设置成copy，不能复制还是移动

move 移动元素，这是默认值。
copy 复制元素，将有一个复制光标。 不需要指定 index 和 wrapper。

我在例子里面，尝试修改effect-allowed的值，设置成move或者copy都是移动的项目，源目标上的节点都会消失，如果设置成copy，在MAC机器上，用chrome或者safari，按住option键，在用鼠标拖拽，实现的效果是copy的效果。
请问这是为何？

Moving an element actually copies it

Hello,

I'm attempting to understand how does the vddl work and I got stuck at my list elements being copied instead of moved.

CategoryTree.vue

<template>
    <aside class="menu">
        <vddl-list :list="categories" :horizontal="false">
            <ul class="menu-list">
                <node v-for="(category, index) in categories" :category="category" :index="index" :list="categories"></node>
            </ul>
        </vddl-list>
    </aside>
</template>

<script>
    import { default as node } from './Node'

    export default {
        components: {
            node
        },

        data () {
            return {
                draggingDisabled: false,
                categories: [
                    {
                        "id": 8,
                        "date_added": "2016-10-21 18:56:51",
                        "name": "Newsy",
                        "children": [
                            {
                                "id": 24,
                                "date_added": "2017-07-21 15:20:52",
                                "name": "Wydarzenia",
                                "children": []
                            },
                            {
                                "id": 14,
                                "date_added": "2017-03-18 18:36:52",
                                "name": "Ruch pracowniczy",
                                "children": []
                            },
                            {
                                "id": 13,
                                "date_added": "2016-12-28 20:10:52",
                                "name": "Lokatorzy",
                                "children": []
                            },
                            {
                                "id": 16,
                                "date_added": "2016-12-28 20:16:07",
                                "name": "Antyfaszyzm",
                                "children": []
                            },
                            {
                                "id": 18,
                                "date_added": "2016-12-28 20:13:00",
                                "name": "Akcje spo\u0142eczne",
                                "children": []
                            },
                            {
                                "id": 23,
                                "date_added": "2017-05-10 14:22:04",
                                "name": "\u015arodowisko anarchistyczne",
                                "children": []
                            },
                            {
                                "id": 12,
                                "date_added": "2016-12-28 20:10:41",
                                "name": "Represje",
                                "children": []
                            },
                            {
                                "id": 17,
                                "date_added": "2016-12-28 20:12:53",
                                "name": "Prawa zwierz\u0105t",
                                "children": []
                            },
                            {
                                "id": 22,
                                "date_added": "2017-03-18 18:37:46",
                                "name": "Kultura, sztuka, muzyka",
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "date_added": "2016-11-28 22:19:07",
                        "name": "Publikacje",
                        "children": [
                            {
                                "id": 15,
                                "date_added": "2016-12-30 11:26:41",
                                "name": "Ruch pracowniczy",
                                "children": []
                            },
                            {
                                "id": 20,
                                "date_added": "2016-12-30 11:26:38",
                                "name": "Antyfaszyzm",
                                "children": []
                            },
                            {
                                "id": 5,
                                "date_added": "2016-12-30 11:26:45",
                                "name": "Antykapitalizm",
                                "children": []
                            },
                            {
                                "id": 7,
                                "date_added": "2016-12-30 11:26:53",
                                "name": "Historia",
                                "children": []
                            },
                            {
                                "id": 6,
                                "date_added": "2017-03-18 18:37:42",
                                "name": "Kultura, sztuka, muzyka",
                                "children": []
                            },
                            {
                                "id": 19,
                                "date_added": "2016-12-30 11:27:01",
                                "name": "Ruch wolno\u015bciowy",
                                "children": []
                            },
                            {
                                "id": 3,
                                "date_added": "2016-12-30 11:27:04",
                                "name": "Prawa zwierz\u0105t",
                                "children": []
                            },
                            {
                                "id": 21,
                                "date_added": "2016-12-30 11:27:10",
                                "name": "Blog techniczny",
                                "children": []
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

Node.vue

<template>
    <vddl-draggable :draggable="category" :wrapper="list" :index="index" effect-allowed="move" :key="index" external-sources="false">
        <li>
            <a :data-category-id="category.id" :data-added="category.date_added">[{{ index }}] {{ category.name }}</a>

            <vddl-list v-if="category.children.length > 0" :list="category.children" :horizontal="false">
                <ul>
                    <node v-for="(child, num) in category.children" :category="child" :index="num" :list="category.children"></node>
                </ul>
            </vddl-list>
        </li>
    </vddl-draggable>
</template>

<script>
    export default {
        name: 'node',
        props: ['category', 'list', 'index']
    }
</script>

Do you have any ideas if I'm doing anything wrong or is it a bug?

Thanks.

nested list by XMLHttpRequests

Hello.
When i do my list via XMLHttpRequests sorting not working properly.

if I move the container up, then the index of the top becomes the same as the lower one. that is, two identical containers are obtained.

nested-list.vue

 axios.get('/tree/'+this.item.id)
    .then(response => this.item.columns = response.data) 

if i load all tree with childrens at once sorting working normally.

vdd-list dragover回调函数为什么会触发多次

如题

How can I make an element be a dropzone and a drag element at the same time ?

demo page not opening

列表是否支持多级嵌套，类似菜单栏那样的？？

你好，看了你的示例，列表是否支持多级嵌套，类似菜单栏那样的？？

是否支持动态添加dropzones

尝试在example/nested.vue中添加

<div class="new-elements">
          <div class="panel panel--info">
            <div class="panel__heading">
              <h3>New Elements</h3>
            </div>
            <div class="panel__body">
              <vddl-draggable class="button"
                              :draggable="itemMock"
                              :copied="copied"
                              effect-allowed="copy">
                Add Item
              </vddl-draggable>
              <br>
              <vddl-draggable class="button"
                              :draggable="containerMock"
                              :copied="copied"
                              effect-allowed="copy">
                Add Container
              </vddl-draggable>
              <br>
              <a @click="dropzones.C=[]">Add Dropzone</a>
            </div>
          </div>
        </div>

添加<a @click="dropzones.C=[]">Add Dropzone</a>代码
点击Add Dropzone会出现奇怪的问题

1. 视图中Dropzone没有即时出现,随便更改Container排序,新的Dropzone才会出现
2. 拖动新的Container到新的Dropzone,视图并不能出现Container

是否我的使用方法有问题?

Tree View support?

This looks awesome ... I'm looking for something like this and it's the best for VueJs I have found yet.

But I'm looking for something a little different. I need to edit a tree view of nodes and move them around like the container part ...

Something like this, besides it's for angularjs: https://angular-ui-tree.github.io/angular-ui-tree/#/basic-example

Is that a big new thing for vddl or could this be easily implemented ... I can see most of the stuff is supported in some way already.

Modifying the list doesn't re-render

I have a list like this:

    <vddl-list
      :list="a"
      :allowed-types="['a']"
      :horizontal="false">

      <vddl-draggable v-for="(item, index) in a" :key="index"
        :draggable="item"
        :index="index"
        :wrapper="a"
        type="mytype"
        effect-allowed="move">
        <div>asdasd</div>
      </vddl-draggable>

      <vddl-placeholder>
        <div class="placeholder"></div>
      </vddl-placeholder>
    </vddl-list>

a = [1]

If I modify the array a.push(2), the list doesn't update. I can see the Vue dashboard to properly update and add the components

but the actual view stays the same. I think this is because we're modifying the DOM and adding the placeholder component, and vue.js loses track of the elements

Uncaught TypeError: Cannot read property 'splice' of undefined

Hello,
I'm working on a 3 level nested lists.
There is an issue when I'm trying to drop an element to a list element that is empty or newly created.
The targeted list is undefined.

Section.vue?b2d5:144 Uncaught TypeError: Cannot read property 'splice' of undefined at VueComponent.handleDrop (Section.vue?d3fb:142) at boundFn (vue.esm.js?efeb:188) at VueComponent.invokeCallback (vddl.runtime.js?801c:372) at VueComponent.boundFn [as invokeCallback] (vue.esm.js?efeb:187) at VueComponent.handleDrop (vddl.runtime.js?801c:261) at Proxy.boundFn (vue.esm.js?efeb:188) at drop (vddl.runtime.js?801c:161) at invoker (vue.esm.js?efeb:1986) at HTMLDivElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1784)

It works fine with lists that have already items.

Issue with Scrolling while the item is selected for dragging.

Id just like to say that this package is awesome! It has saved me a load of time.

When i click an item and move it as it to reorder the list, i cannot scroll. This is a issue if you have a very long list and need to move an element from the top to the bottom and vice versa!

do you know of a way to fix this?

Thanks!

后期升级能不能扩展个自定义事件

后期升级能不能扩展个自定义事件
例如：右键，双击
拖拽优化：如果可以拖拽到内容盒子的头部就判断为盒子比-必须拖拽到盒子里更好吧。不过功能上实现还可能有点复杂。

Is there a way to get parent container ID when dropping items?

This is more of a question than an issue.

Let's say I have a nested list. I then drag an item from one container to another. Is there any way to see the ID of the container I dropped the item in?

Right now I only get information about the item's ID and the containers list in the inserted callback.

How to stub the vddl components?

How can I stub the vddl components?
I tried with importing the components but getting
SyntaxError: Unexpected token <

Ugly Flickering effect?

Hello,

I'll start off by saying that this is a great tool, I am using it in many different places in my project!

I'm having an issue when I click and drag the field I want to move, I get this ugly hovering effect that flickers.

I have attached a video of the issue is getting, would you be able to assist in helping me fix this?

Thanks!

https://cl.ly/0s123d3a0O1x

Publish as WebJar

It would be super nice, if you could publish your library as WebJar.
https://www.webjars.org/contributing
WebJars make using client-side dependencies within JVM based projects very convenient.

Cheers

duplicate vddl-draggable using :inserted

Hi,
I'am using :inserted to send requests to the backend to persist my vddl-list reordering. But noticed that the item I am dragging is duplicated.
I noticed this paragraph in the docs:

Note that for reorderings inside the same list the old element will still be in the list due to the fact that moved was not called yet

So how to overcome this problem? Do I need to listen for a different callback?
thanks

"vddl": "^0.5.2",
"vue": "^2.4.2",

Drop doesn't work

Hey,

Thank you for your amazing plugin, it works well but I am encountering an issue when trying to drop a draggable element over a list...

The following code triggers dragstart, dragend and dragover methods but nothing happens on drop event... Any idea?

<vddl-list :list="self.cards.hand" :horizontal="true">
    <vddl-draggable v-for="(card, index) in self.cards.hand" :index="index" :wrapper="self.cards.hand" @dragstart="testDragStart" :draggable="card">
        <img v-bind:src="'/assets/img/full_cards/' + card.id + '.png'" />
    </vddl-draggable>
</vddl-list>

<vddl-list @drop="testDrop" list="testArr"></vddl-list>

var vueData = {
    testArr: [],
    self: {
        cards: {
            hand: [],

I am using Vddl by importing the main .js file (I know that's very dirty)...

Thanks for your help 😊

Item disappears when moved to last last position.

I was just running a sample code:

<template>
    <div>
        <h1>Drag & Drop</h1>
        <div v-if="showLists" class="v-col--auto" v-for="list in lists" :key="list.label">
            <div class="panel">
                <div class="panel__heading">
                    <h3 class="">List of {{list.label}} (max. {{list.max}})</h3>
                </div>
                <div class="panel__body">
                    <vddl-list class="panel__body--list" :list="list.people"
                               :allowed-types="list.allowedTypes"

                               :inserted="handleInserted"
                               :dragover="handleDragover"
                               :drop="handleDrop"

                               :disable-if="list.people.length >= list.max">

                        <vddl-draggable class="panel__body--item" v-for="(person, index) in list.people"
                                        :key="person.name + person.key"
                                        :draggable="person"
                                        :type="person.type"
                                        :wrapper="list.people"
                                        :index="index"
                                        :disable-if="person.type === 'unknown'"
                                        effect-allowed="move"

                                        :selected="selectedEvent"
                                        :dragstart="handleDragstart"
                                        :dragend="handleDragend"
                                        :canceled="handleCanceled"
                                        :moved="handleMoved"

                                        :class="{'unknown': person.type === 'unknown'}">
                            {{person.name}}
                        </vddl-draggable>

                        <vddl-placeholder class="panel__placeholder">
                            Drop any <strong>{{list.allowedTypes.join(" or ")}}</strong> here
                        </vddl-placeholder>
                    </vddl-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue  from "vue";
    import Vddl from "vddl";

    Vue.use(Vddl);

    export default {

        components: {},

        mounted() {
            window.vm = this;
        },

        data() {
            return {
                showLists: true,
                lists    : [
                    {
                        label       : "Men",
                        allowedTypes: [
                            "man"
                        ],
                        max         : 4,
                        people      : [
                            {
                                name: "Bob",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Charlie",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Dave",
                                type: "man",
                                key : 0
                            }
                        ]
                    },
                    {
                        label       : "Women",
                        allowedTypes: [
                            "woman"
                        ],
                        max         : 4,
                        people      : [
                            {
                                name: "Alice",
                                type: "woman",
                                key : 0
                            },
                            {
                                name: "Eve",
                                type: "woman",
                                key : 0
                            },
                            {
                                name: "Peggy",
                                type: "woman",
                                key : 0
                            }
                        ]
                    },
                    {
                        label       : "People",
                        allowedTypes: [
                            "man",
                            "woman"
                        ],
                        max         : 6,
                        people      : [
                            {
                                name: "Frank",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Mallory",
                                type: "woman",
                                key : 0
                            },
                            {
                                name: "Alex",
                                type: "unknown",
                                key : 0
                            },
                            {
                                name: "Oscar",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Wendy",
                                type: "woman",
                                key : 0
                            }
                        ]
                    }
                ]
            };
        },

        methods: {

            selectedEvent(item) {
                this.selected = item;
            },
            handleDragstart(item) {
                console.log(":v-draggable: dragstart", item);
            },
            handleDragend(item) {
                console.log(":v-draggable: dragend", item);
            },
            handleCanceled(item) {
                console.log(":v-draggable: canceled", item);
            },
            handleMoved(item) {
                console.log(":v-draggable: moved", item);

                const { index, list } = item;
                list.splice(index, 1);
            },

            handleInserted(item) {
                console.log(":v-list: inserted", item);
            },
            handleDragover(item) {
                console.log(":v-list: handleDragover", item);
            },
            handleDrop(data) {
                console.log(":v-list: drop", data);
                const { index, list, item } = data;

                item.key = new Date().getTime();
                list.splice(index, 0, item);
            }
        }
    };
</script>

怎么一个seleted状态的元素进行拖拽排序后还存在这个状态

目前正运用大佬插件实现一个基于vue的表单设计器项目，但遇到一个问题。当我拖拽排序列表里进行了seleted回调后，会给当前元素添加一个选中的状态，但如果我再去拖拽当前这个选中元素进行重新排序时，之前选中的状态就不存在了。看了大神的源码，无奈能力有限，望大神指点一二。另外还一个问题就key的重复问题，看了之前一些求解，也未能解决！

How do I get the id from the container?

I need to validate that the next flow is correct , but I do not have the container Id

Background is added to dragged element.

Hello,

First of all I thank you very much for this awesome component. It's really awesome!

Actually I'm experiencing trouble with the dragged element.

A background is added to the element out of nowhere. Also the tooltip (which is a display:absolute; element attached to the body) gets partly copied.

I've taken a picture:

Thank you very much!

Disabling drag & drop is not working correctly

Items disappear under certain circumstances if you disable drag & drop and then drag them.

Steps to reproduce

1. Go to this page: http://hejx.space/vddl-demo/#/nested
2. Click the red 'disable' button.
3. Select the text inside of an item and drag it.

Temporary solution
I managed to get around this by adding this class to my css:

.disable-drag {
  user-select: none;
  pointer-events: none; /* Not needed but prevents visual effect of dragging an item. */
}

And then adding

:class="{'disable-drag': disable}"

To my nested list like this
<vddl-draggable class="group-item" :class="{'disable-drag': disable}"
and this
<vddl-list class="group-body" :class="{'disable-drag': disable}"

How to add a background image/icon in drop area?

I want to add a plus icon/image in drop area. Something like watermark. How can I achieve this?

vddl-list handleDrop callback not returning the callback result

transferredObject is alway true or false but can't be, as the documentation says it here
http://hejx.space/vddl/#/component/vddl-list the result of the callback.

In the doc :
"All other return values will be treated as the object to insert into the array. In most cases you simply want to return the item parameter, but there are no restrictions on what you can return."

The reason is invokeCallback() only returns true or false, but not the result of the invoked callback.

Current version :

    invokeCallback(expression, event, index, item) {
      var fn = this[expression];
      if (fn) {
       fn({
          event: event,
          index: index,
          item: item || undefined,
          list: this.list,
          external: !this.vddlDragTypeWorkaround.isDragging,
          type: this.vddlDragTypeWorkaround.isDragging ? this.vddlDragTypeWorkaround.dragType : undefined
        });
      }
      return fn ? true : false;
    },

Suggestion :

    invokeCallback(expression, event, index, item) {
      var fn = this[expression],
          ret = true;
      if (fn) {
        ret = fn({
          event: event,
          index: index,
          item: item || undefined,
          list: this.list,
          external: !this.vddlDragTypeWorkaround.isDragging,
          type: this.vddlDragTypeWorkaround.isDragging ? this.vddlDragTypeWorkaround.dragType : undefined
        });
      }
      return fn ? ret : false;
    },

Update the version of vddl on NPM

Hi guys,

Thanks for the work you do!

Could we check that the latest changes are published on NPM? I'm looking for an ability to set a custom tag for vddl-draggable and seems it is not published yet, but the pull request has been merged long time ago.

How to drag and drop smooth?

Hi guys,
How to drag and drop smooth?
Like this:
https://jobchatproduction.s3.ap-southeast-1.amazonaws.com/mediaUpload/1557117220360_bhy9lcjf8hm.ogv

code

拖拽不同的按钮，对应的添加上对应的html代码段，可以吗

How can I make a drag element also be a dropzone?

Hi! Is it possible to make a drag element also be a dropzone?

Currently I have a list of elements I can reorganize via drag and drop. However I would also like to be able to drag elements from another list inside the elements of the former one. Is it possible ?

I have a list of elements I can reorganize : Colors, Components and Text Styles. These are drag elements. And I want to be able to drag elements from another list into these three elements as shown below:

Thanks in advance 🙂

关于拖拽后值改变的问题

你好，用了你的vddl感觉非常不错，但是最近在使用拖拽的时候遇到一个问题。
1：首先我拖拽了两个输入框，然后改变了其中的一个title值
2：在拖拽两个输入框互换顺序的时候，两个输入框的title值成为了相同的
3: 我大体看了下，好像是在互换的时候，删除了其中的一个，然后把新的给覆盖上了
描述的不是很清楚，下面有截图

shx causes tests to fail

Solve one problem, introduce another...
It appears that shx causes the tests to fail. I am unsure what to do about it, but maybe there's another solution than shx if we really can't use it.

> [email protected] purge /home/travis/build/hejianxian/vddl
> shx rm -rf dist/
rm: no paths given
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] purge: `shx rm -rf dist/`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] purge script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2017-11-19T12_07_26_867Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run purge && npm run build:runtime && npm run build:compiler`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2017-11-19T12_07_26_879Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepublish: `npm run lint && npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2017-11-19T12_07_26_962Z-debug.log

dragover not firing on element

Thanks for the component - it's saved me significant time on a side project!

With Vue 2.5.2 and vddl 0.5.2, given the Vue file below, I can't seem to get the checkValidDrop callback to fire. This component renders recursively through nested items (which can be either a parent with children, or not) and works great, other than I'd like to be a bit more selective about exactly where I'm allowing things to show they can drop.

The console.log firing in the function never fires when I'm dragging an item. When I hard-set it to :dragover="false" for testing, it complains that it wants a function (which makes sense). I'm digging through source now, but any pointers would be much appreciated!

<template>
<ul>
    <vddl-list :list="docs" :horizontal="false" :disable-if="isFake" :dragover="checkValidDrop">
        <li v-for="(d, index) in docs" :key="d.id">
            <vddl-draggable :draggable="d" :index="index" :wrapper="docs">
                <vddl-nodrag>
                    <vddl-handle>
                        <ceri-icon name="ma-drag_handle" scale="2.50" class="text-dark"></ceri-icon>
                    </vddl-handle>
                    <span v-else>{{ d.title }}</span>
                </vddl-nodrag>
                <MyList v-if="d.is_category" :docs="d.children"></MyList>
            </vddl-draggable>
        </li>
        <vddl-placeholder class="d-flex">
            <div class="handle"></div>
            <div class="title"></div>
        </vddl-placeholder>
    </vddl-list>
</ul>
</template>

<script>
export default {
    name: 'MyList',
    props: ['docs'],
    data: function () {
        return {}
    },
    methods: {
        checkValidDrop: function (dragover) {
            console.log('hrm')
            return false
        }
    }
}
</script>

vddl-draggable的callback问题

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

Issue with placeholder in list transitions

When transition group is applied over the list vddl-draggable the placeholder doesn't work as expected since transition group by default inserts a span over the element and placeholder vddl-placeholder is outside the wrapped span. Is there any workaround for this?

Specify a tag for vddl-draggable

Currently the <vddl-draggable> renders as a <div>.

Would it be possible to specify the rendered tag with a custom directive :tag="button" for exemple?

Thanks in advance 🙂

How do I get the column name where I'm moving the card?

I'm using the code below:

:moved="showTime"

showTime: function (item) { console.log(item) },

Get name Column Destiny?

哪个判断代码可以支持拖拽到文件夹头部插入到内容？

哪个判断代码可以支持拖拽到文件夹头部插入到内容？

Make use of Vue custom events

Hello,
Vddl callbacks are a bit tricky because when defined, they are substitued to standard vddl code. The developer is then forced to handle items/lists stuffs (splices etc...).
It would be very useful to have events to listen to list changes without having to worry about lists splices handling.
Vue makes it very easy to add events.
This could help us to process tasks after something happened (item has been added to a list, redordering, etc...) without having to rely on watchers (and having to do dirty checks to figure out what changed...).

Thanks for your attention

vue2.0支持嵌套拖拽吗

官网文档说只支持vue1.0

list key is not present in vddl-list drop callback

I have been working on a project with earlier version of vddl where drop callback from vddl-list worked properly. But with the newer version, I am facing a trouble. I don't find list key in drop callback object argument. Here is my code block for the callback:

handleDrop({ index, list, item }) {
   list.splice(index, 0, item);
}

It is necessary to mutate list for my project when I drop an element. I can not relay on default drag and drop element insertion. May be there are other solutions which I don't know, please someone tell me how to do that.

Support horizontal and vertical simultaneously

Is it possible to support horizontal and vertical drag'n'drop simultaneously?
I want to drag containers from the "vertical" list inside the "horizontal" list.
Can you provide an example?

I want to do the same as shown on the similar angular dnd list here:
http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested

Duplicate keys detected: { key }. This may cause an update error.

Hi, thanks for your great component!! I have caught a an error while trying to use your demo https://github.com/hejianxian/vddl/blob/master/example/src/views/simple.vue
print of error:

How can I fix it? what more information I cant present to you ?

有bug，元素在disabled-if等于false的情况下被拖动，并且会消失

disabled-if的值，重复地来回切换，并且拖拽元素;然后元素在disabled-if=true的情况下被拖动，并且当元素拖动到父元素之外，元素会被丢失。
在Nested的demo中，可以重复这个bug

I don't want to change the id

vddl/example/src/views/simple.vue

Lines 131 to 144 in 85806a3

	handleDrop(data) {
	console.log(':v-list: drop');
	console.log(data);
	const { index, list, item } = data;
	// change the id
	item.id = new Date().getTime();
	list.splice(index, 0, item);
	},
	handleMoved(item) {
	console.log(':v-draggable: moved');
	console.log(item);
	const { index, list } = item;
	list.splice(index, 1);
	},

How to use it with script tag like vuejs

we use vue js lib with script tag //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js or download and attach only main file

but in this lib we are integrating this lib it gives
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Same issue for other tags also..
Please guide how can we use your library