Vue.draggable: I CAN'T DRAG ITEMS TO AN EMPTY LIST!!!!

[ammdsoftdev]

Hi @David-Desmaisons , I'm really having trouble about having a dynamic list/category

I have this line of code. At page load, the Unassigned and To Do categories has tickets while the other categories are empty.
My problem is that. While I'm free to drag and drop to the NON EMPTY CATEGORIES, I just can't drag anything to the empty categories

<div class="status_box_container mt-4" v-for="(status, index) in ticket_status_list" :key="index">
        <div class="status_box_content">
            <div class="status_box_header">
                <h2 class="status_box_header_name ml-1" dir="auto">{{status.name}}</h2>
                <div class="mt-2">
                    <vs-card class="mb-3 ticket_card new_ticket_prompt" style="text-align:center">
                        <span class="material-icons">
                            add
                        </span>
                    </vs-card>
                </div>
                <div class="_draggable">
                    <div v-for="(cated_tix, index2) in list_array" :key="index2">
                        <template v-if="cated_tix.status_id == status.id">
                            <draggable v-model="list_array[index].data" group="people" @change="_transferTickets" :empty-insert-threshold="100">
                                <vs-card class="mb-3 ticket_card" v-for="(tix,tix_index) in cated_tix.data" :key="tix.id">
                                    {{tix_index}}
                                    {{moment(tix.created_at).format('MMMM DD YYYY | hh:mm A')}}
                                </vs-card>
                            </draggable>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

The structure of my objects are :
For categories : ticket_status_list

[{id : 1, name: 'UN ASSIGNED'}, 
{id : 2, name: 'TO DO'}, 
{id : 3, name: 'IN PROGRESS'}, 
{id : 4, name: 'DONE'}]

For tickets : list_array

[
 { status_id: 1, data:[{ id:1, name: 'ticket 1' }, { id: 2, name: 'ticket 2' }, { id: 3, name: 'ticket 3' }] } ,
 { status_id: 2, data:[{id:7, name: 'ticket 7'}] }
]

I'm really hoping for your response, I just can't seem to make it work. I've tried changing v-model to list and likewise, I've also tried rearranging the array of objects. but nothing seems to work.

[jwheatp]

Hi, I'm not sure that a shouting title with four exclamation marks is the right way to ask a question to the person who works on this project (and help people) on his free time.

On the contrary, I guess that a _thank you_ for his great work should be the first sentence of any issue posted on this repository.

Best regards.

[jonfoster]

Not a Draggable problem.

You're not even creating any empty lists. You are only creating lists where they appear in ticket_status_list (outer v-for) and there is an entry in list_array (second v-for) with v-if="cated_tix.status_id == status.id". And list_array does not contain entries with status_id 3 or 4.

Try adding these entries to list_array:

{ status_id: 3, data:[] },
{ status_id: 4, data:[] }

Also, if you think about it, you can only drop into the list. The catch is that if the list is empty, and has zero size on screen, you won't be able to point the mouse at it to drop into it!

So you probably need some CSS to set a minimum size on the element - that probably means adding a class="do-not-shrink-to-nothing" to the and then adding an appropriate CSS rule.