Can a placeholder dropzone be created at the bottom of Vue Draggable lists?

Question

Can a placeholder dropzone be created at the bottom of Vue Draggable lists?

Currently, I am utilizing Vue.Draggable (accessible at https://github.com/SortableJS/Vue.Draggable) to develop a kanban board that enables me to drag items from one list to another. A challenge I face is that when dragging a list item to the bottom of another list, it does not get added unless the mouse cursor touches an item in the second list while moving.

I am aware that setting ':empty-insert-threshold' for an empty list can expand the drop area to facilitate dropping items, but is there a way to achieve the same effect at the bottom of a non-empty list? If not, could we include a placeholder element to assist users in easily dropping the list item at the bottom of the list?

We have noticed that many users naturally try to place new items at the bottom of lists, which is why enhancing this functionality is crucial for us.

javascript vue.js vue.draggable

Answer 1

Answer №1

By simply adding extra padding to the bottom of the component, I discovered that it effectively creates a space at the bottom for dropping items and provides a clear visual indicator:

<draggable
   :list="inProgressTaskList" 
   group="tasks"
   @change="onDragChange" 
   itemKey="id"
   style="background: yellow; padding-bottom:200px">

https://i.stack.imgur.com/ML80w.png

The excessive yellowness is purely for demonstration purposes!

Although I am using the updated version for Vue 3, I believe this technique will still be effective in Vue 2.

:o)

Answer 2

By simply adding extra padding to the bottom of the component, I discovered that it effectively creates a space at the bottom for dropping items and provides a clear visual indicator:

<draggable
   :list="inProgressTaskList" 
   group="tasks"
   @change="onDragChange" 
   itemKey="id"
   style="background: yellow; padding-bottom:200px">

https://i.stack.imgur.com/ML80w.png

The excessive yellowness is purely for demonstration purposes!

Although I am using the updated version for Vue 3, I believe this technique will still be effective in Vue 2.

:o)

Answer 3

Answer №2

I came across a clever solution in the repository's issues that addresses displaying a placeholder for empty elements only when the draggable container is empty. It also considers transitions for groups (although I haven't personally tested this scenario, it seems to be working fine without transitions). Here is the recommended code snippet for reference:

<transition-group type="transition" tag="div">

.list-group:empty,
.list-group > div:empty {
    padding:1rem;
    text-align:center;
}

.list-group:empty:before,
.list-group > div:empty:before {
    content: 'Drop files here';
}

Answer 4

I came across a clever solution in the repository's issues that addresses displaying a placeholder for empty elements only when the draggable container is empty. It also considers transitions for groups (although I haven't personally tested this scenario, it seems to be working fine without transitions). Here is the recommended code snippet for reference:

<transition-group type="transition" tag="div">

.list-group:empty,
.list-group > div:empty {
    padding:1rem;
    text-align:center;
}

.list-group:empty:before,
.list-group > div:empty:before {
    content: 'Drop files here';
}

Can a placeholder dropzone be created at the bottom of Vue Draggable lists?

Answer №1

Answer №2

Similar questions

Exploring Heroes in Angular 2: Retrieving Object Information by Clicking on <li> Items

AngularJS: Controller isn't being triggered

Inertia with Laravel appears to be triggering Vue components to load twice

The error "clearRect is not defined in javascript" occurs when the property is being called on an undefined object in the JavaScript

The catch-all route handler is triggered following a response being sent by a designated route handler

Concealing overflow in a sticky container when a fixed child element is present

A guide on organizing an array of objects by a specific property using a separate array

Nuxt's fetchUser Auth function lacks reactivity and necessitates a manual refresh for updates to take effect

Is there a way to incorporate a base64 encoded image from a text file into an HTML image?

The Quasar q-form reset button fails to erase the data stored in the form

The process of implementing sticky headers that stay in place while scrolling in a React application

When the button is clicked, the ng-click event will trigger the addClass function, but only on the second click

What is preventing Backbone from triggering a basic route [and executing its related function]?

How can you customize the output buffer size (known as highWaterMark) for child_process.spawn() in node.js?

Converting a JavaScript string into an array or dictionary

Unexpected issue with Ajax form submission when using the submitHandler function in Jquery

Instructions on dynamically positioning a collection of div elements at the center of a webpage container

How can I efficiently utilize the date picker feature in Angular JS for a smooth user experience?

Making payments within a Single Page Application using Vue framework

How to showcase base64 encoded images in pug (jade) with node.js