VueJS with Vuetify: Issue with draggable cards in a responsive grid

I am currently working on creating a gallery that allows users to rearrange images. To test this functionality, I am using an array of numbers.

It is important that the gallery is responsive and displays as a single column on mobile devices.

The issue I am facing is that vue-draggable only seems to work in a single column layout for me.

<template>
    <div>
        <v-row>
            <v-col cols="4" :key="image" v-for="image in images">
                <draggable>
                    <v-card>
                        <v-card-text>[[ image ]]</v-card-text>
                    </v-card>
                </draggable>
            </v-col>
        </v-row>
    </div>
</template>

Any suggestions on how to enable dragging and reordering of cards in this setup?

javascriptvue.jsvuetify.jsvuedraggable

Answer №1

It seems like you are interested in making the columns draggable within the row...

    <draggable class="row" v-model="items" :sort="true">
        <v-col cols="4" :key="image" v-for="image in items">
            <v-card>
                <v-card-text>
                    <v-img :src="image" />
                </v-card-text>
            </v-card>
        </v-col>
    </draggable>

Check out the demo 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

On page load, refresh the content of the div based on the selected radio button values

My goal is to automatically collect the values of checked radio buttons when the page loads, rather than waiting for a user interaction like clicking a radio button. Below is the JavaScript code I am using: $(function () { updateDivResult(); $(&a ...

javascriptjqueryradio-button

What is the process for adding a dot to the package.json file using the npm-pkg command?

I need help using the npm pkg set command to create a package.json file with the following structure: { ... "exports": { ".": { "import": "./dist/my-lib.js", "require": "./dist/my-l ...

javascriptnode.jsnpm

What is the best way to retrieve a variable within a nested function?

I'm struggling to access a variable from within a nested function in the following code: $(function() { var key = getRandomKey(dictionary); resetInputRow(dictionary[key]); $("#button").click( function() { var answer = key; ...

javascriptjquery

Personalize the year heading for v-date-picker

I am utilizing a date picker with the Japanese locale <v-date-picker locale="ja-jp" ></v-date-picker> This feature allows for kanji characters to be displayed for week/month/year. However, I am curious ...

vue.jsvuetify.js

The "useState" React Hook is restricted from being used in a class component. To utilize React Hooks, they can only be invoked within a React function component or a custom React Hook function

I am relatively new to React frontend development and I am currently working on adding a temporary drawer to my Material-UI NavBar. Here is the code snippet where I added the drawer: class Navbar extends Component { render() { const { authentic ...

javascriptreactjsmaterial-ui

What are the steps to implement the jQuery slide menu effect on a website?

When visiting the website , you may notice a symbol positioned in the top left corner of the site. By clicking on this symbol, a sleek div will slide out. How can this type of animation be achieved through javascript or jquery? ...

javascriptmenuslide

What is the best way to wrap `useFetch` in order to leverage reactivity?

When I wrap useFetch() as a composable to customize the baseURL and automatically set an authentication token, I encounter reactivity issues when calling the composable within a component without using the await keyword. Typically, I would call const { dat ...

typescriptvue.jsnuxt.jsvuejs3nuxt3

Tips for making sure there is a delay in between each axios call in a React

Currently in the process of developing an application that needs to interact with a RestAPI by sending a specific set of inputs. However, the API has a major flaw when it comes to scalability and tends to respond with code 429 if bombarded with too many re ...

javascriptreactjsreact-hooks

What are the steps for utilizing JSON data retrieved from an ajax response?

After successfully making an ajax request and receiving JSON data, I am struggling with how to use it effectively. The response I am getting looks like this: [{ "id": "5", "reviewID": "2389", "serviceID": "50707", "title": "well d ...

javascriptjqueryajaxjson

How to access an element from the JSON return value retrieved from an AJAX call using JavaScript

After making an ajax call that returns successfully, I am facing a problem. I cannot access individual elements of the array it returns, and therefore unable to console log it. The error message indicates that the track is not defined, even though it is pr ...

javascriptjqueryarraysjsonajax

The jQuery application adds new HTML elements to the page and then reveals the code that follows

When making an Ajax call and rendering two templates based on the response, I encountered a problem where the correct template renders but the script following it appears on the page as plain text. Here's the code snippet with the issue: if (question ...

javascriptjqueryajax

Avoid the automatic scrolling of a datatable to the top when clicking on a button within a column using jQuery

Is there a method to stop the datatable from automatically scrolling to the top when any of the buttons is clicked? ...

javascriptjqueryajaxdatatables

Developing a digital sound system using JavaScript

I am currently in the process of developing a music player. Below is my HTML code: <div id="main"> <div id="list" draggable="true"> </div> <div id="player"> <div id="buttons"> < ...

javascriptjquery

Chrome runs requestAnimFrame at a smooth 60 frames per second, while Firefox struggles to keep up at

I recently developed a canvas animation using requestAnimFrame and saw great results in Chrome. However, when I viewed it in Firefox, it seemed like a slideshow was running instead of a smooth animation. I'm unsure what could be causing this issue. F ...

javascripthtmlfirefoxgoogle-chromehtml5-canvas

The response from the $http POST request is not returning the expected

I am facing an issue where the $http POST method is not returning the expected response. The required data is located within config instead of data This is my Http POST request: for (var i = 0; i < filmService.filmData.length; i++) { filmData.pu ...

javascriptangularjsposthttp-postangularjs-http

Choose a drop-down menu with a div element to be clicked on using Puppeteer

Issue Description: Currently encountering a problem with a dropdown created using material select. The dropdown is populated through an API, and when selected, ul > li's are also populated in the DOM. Approaches Tried: An attempt was made to res ...

javascriptreactjsmaterial-uipuppeteer

Implementing a PHP button update functionality sans utilizing an HTML form

I need a way to update my database with just a click of a button, without using any forms or POST requests. Most examples I've seen involve updating through forms and the $_POST method. Is there a simpler way to update the database by directly click ...

javascriptphpjqueryajax

Listening for keypress events on a div element using React

I'm currently struggling with implementing a keypress listener on a component. My goal is to have my listener activated whenever the "ESC" key is pressed, but I can't seem to figure it out. The function component I am working with is quite stra ...

javascriptreactjstypescript

The inclusion of HttpClient is causing issues with the functionality of my component

Currently, I am facing an issue with my Angular service called ConnexionService. The problem arises when I try to incorporate CSV files into this service using HttpClient. Strangely, the component associated with this service fails to display once HttpClie ...

javascriptangulartypescript

Can you explain the reference point used in the `drawImage()` function on a canvas?

Here is an inquiry concerning the usage of the drawImage() function. var x = (i-j)*(img[0].height/2) + (ctx.canvas.width/2)-(img[0].width/2); var y = (i+j)*(img[0].height/4); abposx = x + offset_x; abposy = y + offset_y; ctx.drawImage ...

javascriptcanvas