Dragging a value from a chip in Vuetify and dropping it into an input does not function as expected

I am facing an issue with implementing drag-and-drop functionality using v-chip elements and a form. My goal is to enable users to drag any chip and drop it into the form so that the input field in the form captures the value of the dropped chip.

Here is a simplified version of what I have attempted:

<v-chip :draggable="true" @dragstart="draggedData='First Chip'">First Chip</v-chip>
 <v-text-field label="Droppable" v-model="input" @drop="input=draggedData"></v-text-field>

Although the dragging functionality works properly by storing the value in draggedData, the dropping action does not correctly pass the value to the input field as expected.

Can anyone suggest a solution for this issue? Dragging is functional, but the dropping process needs attention.

javascriptvue.jsdrag-and-dropvuetify.js

Answer №1

To prevent one element from blocking another element from being dropped, it is important to utilize the prevent default function in the ondragover event.

Solution 01:

<v-text-field
  label="Droppable"
  placeholder="Droppable"
  v-model="input"
  @drop="onDrop"
  @dragover.prevent
></v-text-field>

Solution 02:

<v-text-field
  label="Droppable"
  placeholder="Droppable"
  v-model="input"
  @drop="onDrop"
  @dragover="allowDrop"
></v-text-field>

allowDrop(e) {
      e.preventDefault();
}

Check out the codesandbox for more details.

https://codesandbox.io/s/brave-poitras-w1qwp?file=/src/components/HelloWorld.vue

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

Enhancing HTML through Angular 7 with HTTP responses

Sorry to bother you with this question, but I could really use some help. I'm facing an issue with updating the innerHTML or text of a specific HTML div based on data from an observable. When I try to access the element's content using .innerHTM ...

javascriptangulartypescript

Initiating Calls from JavaScript to JavaFX

I'm facing an issue while trying to execute a JavaScript function called testCheckMate from Java. The error message I receive is: Exception in thread "JavaFX Application Thread" netscape.javascript.JSException: SyntaxError: Unexpected EOF The WebVie ...

javajavascriptwebviewjavafxfullcalendar

Cross-origin resource sharing policy is preventing a request from the client-side to the server

I am currently working on a Vue.js application and I am facing an issue with CORS policy blocking my backend requests. I am using axios to make the request to the backend for data that I need to display charts on the UI. Here is the code snippet of my char ...

javascriptnode.jsexpressvue.jscors

Navigating in React: How to Implement the Same Route for Different Scenarios Without Compromising Your Application

I'm facing a frustrating issue while trying to incorporate Redux state management and React Router. Despite searching extensively online, I can't seem to find a solution. My Redux state, named user, stores the details of a logged-in user. Upon l ...

javascriptreactjsreact-routerrouter

Exploring the power of searching JSON data using ReactJS

After reading through the "Thinking in React" blog, I'm inspired to create something similar. Instead of filtering an array table, I want it to display the row that matches the input value. I have attempted this and created a jsfiddle example here: j ...

javascriptjqueryjsonreactjs

I encountered an issue with the mui TextField component in React where it would lose focus every time I typed a single character, after adding key props to

I'm encountering an issue with a dynamic component that includes a TextField. Whenever I add the key props to the parent div, the TextField loses focus after typing just one character. However, when I remove the key props, everything works as expected ...

javascriptreactjsmaterial-ui

ReactJS: An error occurred - TypeError: this.state.items.map is not a function

As a beginner in ReactJS, I am working on my first project which is a To-Do List with drag and drop feature, add, delete, and edit functionalities. I encountered an error while trying to map an array upon submitting a text to add an item to the items array ...

javascriptreactjsfrontend

React treats flat arrays and nested arrays in distinct ways

After some experimentation, I discovered an interesting behavior in React when passing nested arrays. Surprisingly, React renders the items properly without complaining about missing keys on the elements. const stuff = 'a,b,c'; // Nested Array ...

javascriptarraysreactjs

Pressing the submit button in the Material UI table clears all selected checkboxes

Take a look at this code snippet: https://jsfiddle.net/aewhatley/Lkuaeqdr/1/. My objective is to construct a table with a submit button utilizing Material-UI components. const { Table, TableHeader, TableHeaderColumn, TableBody, TableRow, Table ...

javascriptreactjsmaterial-ui

What is the best way to incorporate a minimum width and maximum width in CSS that add up to 100% when necessary?

Can anyone help me find CSS rules that can set a fixed width for an element (width: 500px) but also allow it to be responsive with max-width: 100% if the container is narrower than the element? I saw this example and it works perfectly: .elem { width: 60 ...

javascripthtmlcsswidth

Getting the inner element of a particular child from the parent div using selenium with javascript

<div class="A"> <svg> ... </svg> <button> <svg> ... </svg> </button> <svg> ... </svg> </div> <div class="A"> <svg> ... </svg> <button> ...

javascriptselenium

What is the best approach for displaying multiple slots in Vue3?

Is there a way to utilize the h() function within the setup() method in Vue3 to render this template? <label v-for="service in services" :key="service"> <slot name="before" :service="service"></slo ...

vue.jsvuejs3

Preloading jQuery Images in Relation to the Present Document

I am looking to create a custom jQuery image preloader that dynamically loads images based on the current document. My plan is to use a jQuery script that combines the current document name and an adjustable imagename/extension. For example, if the curre ...

javascriptjqueryhtml

Unable to render dynamic ID in Next.js version 13.4.6 due to an issue

https://i.sstatic.net/x8oF1.pnghttps://i.sstatic.net/OEIL5.png Currently diving into next-js! Previously, I utilized dynamic id rendering in my projects. However, encountering errors now with the current version (next js 13.4.6). Having trouble identifyin ...

javascripthtmlnode.jsreactjsnext.js

What is the correct way to establish an array variable containing objects?

What is the correct way to declare an object within an array variable? I encountered the following error message: "TypeError: Cannot set property 'name' of undefined" Here is the code snippet in question: let data = [] data[0].name = "john" ...

javascript

Tips for effectively implementing React.usecallback

Looking for a way to rewrite the handleClick method using React.useCallback in a function called Parent, which is triggered by a button click event in React and TypeScript. function Parent () { const [isOpen, setIsOpen] = React.useState(false); ...

javascriptreactjstypescript

Determining the position of a v-for element in Vue.js when making an HTTP request

I'm faced with a challenge involving an array of posts with comments, each post having an input for creating a new comment. The posts array contains the id of each post as a prop, but I'm unsure how to select the specific post for which I want to ...

javascriptvue.jshttpv-for

Utilizing data as a substitute when creating a SearchBar using Vue3

My VueJs3 application has a search bar implemented using .filter(), and it seems to be working fine. However, when I try to pass the value from my methods to the template, an error occurs. My data becomes a proxy and I am unable to use it in that format. ...

javascriptvue.jsvuejs3

Transform an asynchronous callback into an asynchronous generator format

I have the following function from a third-party package that I am unable to modify async function runTransaction(callback) { const client = await createClient(); try { await client.query("BEGIN"); await callback(client); } ...

javascriptnode.jsasync-awaitdispose

navigate to a Laravel controller utilizing the information from Vue.js

This code snippet represents my Vue.js implementation: new Vue({ el: '#notificationMenu', data: { showModal: false, patients: [], duepatients: [] }, ...

laravelroutesvue.js