Questions tagged [vuedraggable]
The vuedraggable tag has no usage guidance, but it has a tag wiki.
vuedraggable
197
questions
0
votes
0
answers
24
views
can anybody tell me how we can make the q-table rows draggable in quasar
I have tried with vuedraggable package and quasar-ui-q-draggable-table package but it is not working in q-table quasar.
The vuedraggable package is widely used for drag and drop operations in Vue.js ...
- 1
0
votes
1
answer
52
views
Vue draggable not working on b-table, why?
I am using Vue 2 with Bootstrap Vue.
I have a table for which I would like to be able to drag and drop these rows.
But the way I implemented it does not work, but I don't know why.
I am guessing the ...
- 25
0
votes
0
answers
22
views
Incorrect visual representation after transferring all items between groups in VueDraggableNext?
I need to make a wrapper component to sort elements on a page. I took the VueDraggableNext component as a basis. Here is the source code:
https://codesandbox.io/p/devbox/sortable-98v3lk
<template&...
0
votes
1
answer
84
views
Vue Draggable Elements Revert Back to Original Position After Drag and Drop
I'm using vuedraggable in a Vue 3 project to allow reordering of elements within an expansion panel. The elements can be dragged and dropped to a new position within the panel, but they revert back to ...
- 112
0
votes
0
answers
14
views
Vuedraggle is dragged into the specified column, and the name of the group is different. What is the reason?
Vuedraggle is dragged into the specified column, and the name of the group is different. What is the reason?I want to drag from the a list to the specified column, such as c, d
How to implement this ...
- 1
0
votes
0
answers
43
views
<tbody> renders twice when using Vuedraggable in Vueitfy 3
I would like a simple table where I could drag and drop rows to reorder them. The problem I'm having right now is that the tbody is rendered twice, which messes up the layout. I see examples for Vue/...
- 1
0
votes
0
answers
96
views
How can I get relatedContext.element in Vue draggable in nested elements?
This is my ElementsList component:
<template>
<draggable :list="elements" v-bind="dragOptions" :move="handleMove" handle=".handle">
<...
0
votes
0
answers
94
views
Drag and Drop Functionality in Vue.Draggable(SortableJS): Unable to drag items into non-empty groups
I am working with Vue.Draggable and I am trying to create a mechanism that enables drag and drop functionality among different groups of items. My groups of items consist of several md-list-item ...
- 1,087
0
votes
0
answers
59
views
How can I store the expandable position in vue application
I have nested draggable elements in my vue project and for drag event, I am using vue-draggable. So you can imagine my view something similar with this:
--> Element A
--> Element B
--...
- 165
0
votes
0
answers
50
views
how can to revert draggable's initial state
I have nested draggable elements in my vue project and for drag event, I am using vue-draggable. So you can imagine my view something similar with this:
--> Element A
--> Element B
--...
0
votes
0
answers
36
views
Vue draggable Check if Item is already in list and reset to inital state if dropped
I have a parent component which has a child component which is used two times and the Child component uses the Vue draggable library. Now I want to reset the arrays which render the two child ...
- 1
0
votes
0
answers
111
views
How can i drag and drop an item from one v-data-table to another?
I have a parent v-data-table with expandable rows. Each row item has then its own v-data-table.
What I am trying to achieve:
I aim to move an element from a nested v-data-table within one row of the ...
- 43
0
votes
0
answers
108
views
Ant vue Table, Draggable columns
Is there a built-in tool in the Ant Vue Table component for making columns draggable? From my research, it seems there is no such feature available. I attempted to use vuedraggable, but encountered ...
- 13
0
votes
0
answers
161
views
Trouble with Vue3 and vuedraggable: Unable to Drag Elements Between Outermost Layers
I want to drag an element between the outermost elements, but I can't seem to do it successfully. There's only one specific and small spot where I accidentally discovered I can drag it successfully.
...
- 1,675
0
votes
1
answer
168
views
VueJS/Tailwind draggable elements are not resizing the parent or obeying grid rules
I want to break my page into three sections and be able to drag items between each section.
I'm using "vue": "^3.3.0",, "vuedraggable": "^4.1.0",, and "...
- 2,143
4
votes
1
answer
727
views
Vue3 with Draggable - Nesting list - Reactivity
I try to make drag and drop list with Draggable plugin, but depend how i assing new value in watcher from component(second code block) that's responsible of nesting it work only in one way
Codesandbox ...
0
votes
0
answers
50
views
Vue-draggable-next v-for kill the connection with original list
I want to create more groups to move items around from one to another.
Given the following lists and draggable options:
<script setup>
import { computed, ref } from 'vue';
import { ...
- 166
1
vote
2
answers
469
views
what's the type of the Vue.Draggable "change" event?
I'm trying to get the type (in a typescript sense) of a change event from Vue.Draggable
https://github.com/SortableJS/Vue.Draggable
but can't find its definition
the documentation shows that the event ...
- 23
0
votes
0
answers
30
views
How can I make element draggable except the button
I am using vue-draggable for my project. It is something similar like this.
<draggable
v-if="isOpen || (isOpen && isAllOpen)"
v-model="...
0
votes
0
answers
165
views
How can I make vue-draggable element with button
I want to have a draggable element with a button for my vue 2 application. For this, I am using vue-draggable. So something like that in the picture:
So currently, when I click the button (the one ...
0
votes
0
answers
108
views
How can I drag element into another one with vue-draggable
I have nested elements that need to be draggable in between. My problem is at the same level there are elements and when I drag one into another one I want them to have a parent-child relationship but ...
0
votes
0
answers
42
views
How to stop draggable when inside of the draggable clicked
I have draggable and there are nested items inside of it. So it is something like this:
<template>
<draggable v-model="element" :move="handleMove" v-bind="...
1
vote
1
answer
278
views
Vue draggable next get to property of list
Can someone point me to the error I make in this plain simple example.
Want to display the title property but I misinterpreted some docs I guess.
Is there a specific property that should be set to get ...
- 37
0
votes
1
answer
103
views
How to make element parent if the element doesnt have a child in vue draggable
I am trying to use vue-draggable in my project: https://github.com/SortableJS/Vue.Draggable
Here is my ElementsList component:
<div>
<draggable v-model="newElement" :...
2
votes
0
answers
267
views
How to cancel a dragging operation in vuedraggable programmatically
When dragging, if currently dragged element is over a (fixed) non-movable element, it should do some checking to find the closest available element to be swapped with. After that I would like to ...
- 3,885
0
votes
1
answer
55
views
VueDraggable nested lists issue
I would like to use VueDraggable library and create nested lists. So I made a component accodring documentation. Everything works fine till I try to make nested item. I can not. Only if nested list ...
- 4,044
0
votes
1
answer
157
views
Vue3-Draggable - Fetch Object List
I feel i must be very close to gettign this working, all I did was clone the original project from github and change the awway it creates to my own fetch request. When I set it as an array I see my ...
- 503
0
votes
1
answer
667
views
vue drag and drag custom components
I'm trying to make custom components draggable with vuedraggable package but for some reason i can't make it work, i also want it to work by copying not moving the component altogether
here's my code:
...
- 35
0
votes
0
answers
90
views
Erratic behavior trying to reorder array via Drag and Drop in Vue 3 using vue-draggable-next
I'm having trouble rearranging an array using vue-draggable-next to drag and drop items in an array. The array is objects containing song sections, (for example: "Verse 1", "Chorus"...
0
votes
0
answers
70
views
VueDraggable Lock items
I want some of the items to be locked and not be able to move. I saw in the documentation handle prop but this only disable dragging but if some other element which is able to be dragged go over will ...
- 354
0
votes
0
answers
35
views
Nested vuedraggable - children for draggable not display
I would like to achieve the effect of managing subpages (changing the order, level) on the page by dragging.
I use vuedragabble for this.
I have a problem with changing the depth levels - I think I ...
- 229
2
votes
2
answers
3k
views
How to get vuedraggable to work in Vue 3?
I've been trying to get vuedraggable to work. I've copied the code pretty much exactly from here: https://github.com/SortableJS/vue.draggable.next
Here's my test component:
<script setup>
import ...
- 51
1
vote
1
answer
613
views
How do I make a two dimensional grid with Vue.Draggable?
I am using Vue2 with Vuetify and I have a two dimensional grid of buttons.
<v-row>
<v-col cols="6" v-for="item in itemList" :key="item.id">
<v-btn ...
0
votes
1
answer
241
views
how to disable remove the element after dragging in vue-draggable
I am working on vue draggable, the app has two list - list a and list b. I need to drag the elements from list a to list b. When list b is added with element from list a, list a is also automatically ...
- 7,745
0
votes
3
answers
1k
views
How to use vuedraggable for an n x n grid of cells?
I have taken a simple sample from vue.draggable.next and converted it to use vuetify's v-btn. The resulting code works fine:
<draggable
:list="list"
:item-key="name&...
- 1,297
0
votes
1
answer
995
views
What property is linking these two lists in vue.draggable?
<template>
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="list1&...
- 61
0
votes
1
answer
203
views
vuedraggable: register global component without import export
Is there a way to register vuedraggable as a global component without import export?
My setup looks like this now (simplified):
<div id="contentNavigation"></div>
<script src=&...
- 27
0
votes
1
answer
894
views
Drag and Drop works visually in Cypress Test Runner, but it's not actually having an effect [closed]
I'm using the 4tw/cypress-drag-drop plugin to move a draggable element into a div. When the element is properly dragged and dropped, it should trigger some other elements to appear (such as an X on ...
- 61
0
votes
0
answers
212
views
Vue.draggable - swapping between two list
I have a problem. I need to organaze two draggable table like swapping.
1 table: have 7 fixed items.
2 table: Other items.
When you swapping items from the second table to the first, a dialog box ...
- 11
0
votes
1
answer
355
views
Vue Draggable clone into another list via custom component
I'm working in a Nuxt JS 2.x project that has Vue Draggable 2.24.3
I have a page where I have two draggable lists as part of a custom component called DraggableList
My DraggableList component is the ...
- 2,856
0
votes
1
answer
519
views
v-model inside vue draggable lost focus after keypress?
I have installed, "vuedraggable": "^4.1.0",
Works very well, and orders well, but inputs lost focus on any keypress action with v-model.
The problem is definitely with vuedraggable ...
- 4,743
2
votes
1
answer
2k
views
How to drag rows from one DataTable to another? (PrimeVue)
I'm trying to drag rows from one DataTable to another. This animation shows what I try to achieve, kind off.
But from the looks of it PrimeVue doesn't seem to support this, or at least I can't figure ...
- 3,508
3
votes
0
answers
1k
views
vuedraggable working until <transition-group> added, draggable element must have an item slot
Trying out vuedraggable and the items drag and sort.
<draggable :list="listRows" item-key="listID" class="list-group">
<template #item="{ element }"&...
- 5,872
0
votes
1
answer
224
views
Vue Draggable List is not parsed properly in VueJs3
I want to make a list of draggable objects like the one on the left side of this image:
To do so I have modified Vue2InteractDraggable.vue to work with VueJs3 as you can see in this codesandbox, but ...
- 3,605
0
votes
0
answers
46
views
Nested Vuedraggable w/ Vuex
I have this same design as an official nested vuedraggable example here.
I am using vuex in my version and I am wondering if it is possible to update the items within the rows with a getter/setter ...
- 109
1
vote
3
answers
392
views
keep footer last in list when dragging new item into the list from another
I have Vue Draggable working like a Kanban board with multiple columns, and I have made each column at least the height of the viewport so that each item can easily be dragged into the column next to ...
- 113
0
votes
1
answer
475
views
Vue Draggable, mark elements as undraggable?
I've scoured the documentation and the github forum, and I could be mistaken, but as far as I can tell there is no possibility to exclude specific elements from being draggable in Vue Draggable for ...
- 2,270
1
vote
1
answer
897
views
how to enable only one way drag in 2 lists draggable in vuejs
I am using vuedraggable library to create draggable items(https://github.com/SortableJS/Vue.Draggable)
I want to create two draggable lists and I only enable drag from list1 to list2. So I want to ...
0
votes
1
answer
387
views
How to get complete node list of elements from inside vuedraggable template
I'm using vuedraggable (https://github.com/SortableJS/vue.draggable.next) and trying to get a NodeList of all elements rendered inside the draggable component.
The usual Vue3 way would be to use ...
- 331
1
vote
0
answers
324
views
Vuetify Draggable Data-table with nested children rows
I have a Vuetify data table with draggable rows. Working well. Here is my code:
<template v-slot:body="props">
<draggable
:list="props.items"
tag="...
- 3,210