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.

javascriptvue.jsvue.draggable

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

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';
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The function loadJSON has not been declared

Currently utilizing the Atom text editor, I have successfully installed node.js along with npm install -g json. The installation process was smooth and the version information displayed correctly in the command prompt window. Running a server using nodemon ...

javascriptjsonnode.jsnpmatom-editor

PHP is receiving data from $.post in an invalid format

I am facing a challenge in sending a JavaScript Object() to a PHP file in the correct format that $.POST requires. The PHP file does not establish any $_POST[] variables, which suggests that I may be transmitting the data in an improper format. JS: $(&ap ...

javascriptphpjqueryhtmlpost

Having trouble with my JQuery image slider... Can anyone help troubleshoot what I might have missed?

I am trying to create a simple image slider, but it doesn't seem to be working. I followed a tutorial on YouTube closely, but since I can't compare my code with theirs on a website, I'm having trouble identifying the mistake. Despite followi ...

javascriptjqueryimageslider

Utilizing Angular routing in HTML5 mode within a Node.js environment

While I've come across other solutions to this problem, they all seem to have drawbacks. One option leads to a redirect, which could be disastrous for my front-end application that relies on Mixpanel. A double-load of Mixpanel results in a Maximum Ca ...

javascriptangularjsnode.jsexpressangular-ui-router

Ways to turn off emojis in froala editor

I successfully integrated the Froala editor and dynamically generated an ID for it based on specific requirements. Everything is working well, but I now need to disable emoticons in this editor. $('#froala'+key).froalaEditor({ imageUploadP ...

javascriptangularjs

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time. Here is what I have: function animation() { document.getElementById('ExampleButton').className = &apo ...

javascripthtmlcssanimationbutton

Is there a way to dynamically apply multiple classes to a <span> element in Vue.js and Tailwind based on an element from an array?

I've got an array in my JavaScript file that contains a list of national parks along with their visitation status. var parksList = new Vue({ el: "#parks", data: { parks: [ { name: "Acadia", state: "Maine", s ...

vue.jstailwind-css

Activate the ajax function using a specific reference

I have been working on creating an ajax function that contains all the data inside the variable called $item within the following function: public function handleAjaxData(&$item,&$params,$limitstart) { $view = JRequest::getVar('view' ...

javascriptphpjqueryajaxjoomla

Twilio's phone calls are programmed to end after just 2 minutes

For the past week, I've been dealing with a frustrating issue where calls are being automatically disconnected after 2 minutes of recording. Here is the TwiML code: <Response> <Say voice="woman" language="en">Hii Welcome to our App</Sa ...

javascriptnode.jstwiliotwilio-apitwilio-click-to-call

`Why is the created() method in Vue important?`

After studying the life cycle hooks of Vue.js, I am struggling to find a practical use for the created() function. Although I understand that created() can interact with reactive data and events, it cannot access DOM elements. If anyone could provide me ...

vue.jsvuejs2vue-component

Troubleshooting: Passing data from child to parent component in Vue causing event malfunction

This is a custom component created by Jobs that triggers an event to its parent component. <div class="card py-1 my-1" @click="$emit('active-job', job.id, job.slug)"></div> The parent component is set up to listen ...

vue.jsvue-componentcustom-events

What is preventing the use of this promise syntax for sending expressions?

Typically, when using Promise syntax, the following code snippets will result in the same outcome: // This is Syntax A - it works properly getUser(id).then((user) => console.log(user) // Syntax B - also works fine getUser(id).then(console.log) However ...

javascriptnode.jsexpresspromise

What is the best way to prevent a draggable div from moving past the edge of the viewport?

My situation involves a draggable div that functions as a popup window when a specific button is clicked. However, I noticed that dragging the div to the end of the viewport allows me to drag it out of the visible area, causing the body of the page to expa ...

javascripthtml

Ensuring the successful execution of all AJAX calls (not just completion)

I've seen this question asked many times about how to trigger a function once all AJAX calls have finished. The typical solution involves using jquery.stop(). However, my situation is unique - I want to display a confirmation banner only after all AJA ...

javascriptjqueryajax

Steps to validate individual input text fields that create a date and display an error message if the date is not valid

Currently, I am working on a React Material UI component designed to capture a user's 'Date of Birth'. This component consists of three separate inputs for the day, month, and year. In order to enhance this functionality, I would like to im ...

javascriptreactjsmaterial-ui

Create a new JSON file to preserve the value of a JSON object

I am working with a JSON file that looks like this: { "soils": [{ "mukey": "658854", "mukeyName": "Meggett-Kenansville-Garcon-Eunola-Blanton-Bigbee (s1517)", "sl_source": "Fl soil map", "cokey": "3035468", "soilName": "Eunola", " ...

javascriptjson

Issue with rendering Backbone subview correctly

Today, I delved into the world of website development using backbone.js. Surprisingly, after a whole morning of trying to crack a puzzling problem, I find myself stuck. Let me focus on the crucial bits of code here. Initially, I have a View named Navigat ...

javascriptbackbone.js

Using the map method in JavaScript, merge two separate arrays to create a new array

In my ReactJS project, I have created two arrays using map function. The first array is defined as follows: const hey = portfolioSectorsPie.map(sector => sector.subtotal); const hello = portfolioSectorsPie.map(sector => sector.percentage) The value ...

javascriptarraysreactjs

Unexpected error 500 (Internal Server Error) occurred due to BadMethodCallException

Using Vue 2.0 and Laravel 5.4, I am working on creating a matching system that includes a dynamic Vue component. For example, when someone likes another person, it should immediately show that the like has been sent or if the like is mutual, it should indi ...

javascriptphplaravel-5vue.jsvue-component

What methods are most effective for evaluating the properties you send to offspring elements?

Currently, I'm in the process of testing a component using Vue test utils and Jest. I'm curious about the most effective method to verify that the correct values are being passed to child components through their props. Specifically, I want to e ...

javascriptvue.jstestingjestjs