Vue.Draggable icon indicating copy to clipboard operation
Vue.Draggable copied to clipboard

How to get the position where the drag ends.

Open hyacinth1210 opened this issue 3 years ago • 2 comments

在拖拽结束的时候,我怎么获取最后元素拖拽的位置

hyacinth1210 avatar Feb 09 '22 08:02 hyacinth1210

if you mean index of the dragged item, then you can get that by using the ":move" prop. it is explained in the documentation in more detail.

DezrtRose avatar Feb 09 '22 17:02 DezrtRose

hi @hyacinth1210

if you mean the item after drag and that item what array will end, I tried to find the solution but found nothing, but i did this.

<Draggable :list="ongoingTask" group="task" class="list-group" @end="onMoveCallback" >
   <transition-group type="transition" name="flip-list">
       <v-alert
           rounded="0"
           border="left"
           colored-border
           color="yellow"
           elevation="2" 
           v-for="(item) in ongoingTask" :key="item.id" class="item mb-2"
           id="ongoingTask"
           >
           {{item.task}}
       </v-alert>
   </transition-group>
</Draggable>

onMoveCallback(evt: any): void{
   console.log(evt.to.children[0].id);
}

i add an id to the item, which will i be using when i update my data after drop .

DarkKangaroot avatar Feb 28 '22 16:02 DarkKangaroot