duplicate vddl-draggable using :inserted

[hejianxian]

duplicate vddl-draggable using :inserted

[hejianxian]

@enghelewa Hi.

First, the inserted callback does not have any side effects, but some things you need to know:

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

About that, because the old list data has not been cropped, the element is only hidden.

For example:

<vddl-list class="panel__body--list"
    :list="list"
    :inserted="handleInserted"
    :drop="handleDrop"
    :horizontal="false">
    <vddl-draggable class="panel__body--item" v-for="(item, index) in list" :key="item.label"
      :draggable="item"
      :index="index"
      :wrapper="list"
      effect-allowed="move"

      :selected="selectedEvent"
      :dragstart="handleDragstart"
      :dragend="handleDragend"
      :canceled="handleCanceled"
      :moved="handleMoved"
      v-bind:class="{'selected': selected === item}">
      {{item.label}}
    </vddl-draggable>
    <vddl-placeholder class="red">Custom placeholder</vddl-placeholder>
</vddl-list>

handleDragstart() {
  console.log(':v-draggable: dragstart');
},
handleDragend() {
  console.log(':v-draggable: dragend');
},
handleCanceled() {
  console.log(':v-draggable: canceled');
},
handleInserted() {
  console.log(':v-list: inserted');
},
handleDrop() {
  console.log(':v-list: drop');
},
handleMoved() {
  console.log(':v-draggable: moved');
}

After completing an operation, it log:

:v-draggable: dragstart
:v-list: drop
:v-list: inserted
:v-draggable: moved
:v-draggable: dragend

So, I'm not sure what you need, but I think you can try the dragend callback.

[mhelaiwa]

@hejianxian
Thank you dragend worked fine for me. I saw it in the docs but unfortunately I read it as dragged not drag end I should read the docs more carefully.
Anyways thank you again.