-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
problems with nesting #191
Comments
@ctf0 v-model should be an array, if it is an object it will (could) not work |
okay np, already passed that issue with |
What is the next issue? |
|
@ctf0 , I guess issue like this would be better adressed on stackoverflow once it is not linked to feature or bug on vuedraggable but on its usage. |
the reason i made the ticket is because i found lots of closed issues on the same subject, however all of the demos in those tickets have the one or same problems and couldn't find a valid solution for any, specially that the original lib that this package is built upon doesnt have the nesting feature. and here is a fiddle u made on another ticket, with minor cleanup https://jsfiddle.net/v8gme77z/60/ it have the issues of
|
Regarding the second problem, you are using incompatinle version of sortable and vuedraggablr. see this fidle: https://jsfiddle.net/dede89/bfksoj5b/ |
okay, will retry again on my local copy even through its showing a different error. |
updatelots of issues are solved, thanx for the fiddle 💪 , now only the adding more nested items issue remains, which i think the problem is
so maybe a fix for that, we would add a new attribute to the option ex.
|
@ctf0 |
for the first link, i already made the recursive comp, check the gif in the main ticket, but the problem is you cant create any more nesting levels other than the one already added, to understand what i mean test with @David-Desmaisons fiddle https://jsfiddle.net/dede89/bfksoj5b/ for the gotchas, i have .dragArea {
min-height: 35px;
display: block;
} <draggable class="dragArea">...</draggable> but nothing new, maybe u mean something else ? |
@ctf0 |
@ctf0 Do you have a children list in the leaf object? |
@VernalVessel could u show me the code for this, or even a fiddle ? @David-Desmaisons am sorry i dont know what u mean, but this is what i have atm |
Share the corresponding tree data please. |
@VernalVessel @ctf0 |
@ChrisShen93 @ctf0 they're separated into many vue files, and i'm afraid it's a bit tough to convert them into fiddles. :( |
@VernalVessel |
@David-Desmaisons am sorry for the late delay, my connection was down for the last week, so here are the 2 comps i use
<template>
<draggable v-model="pages"
class="dragArea"
:options="{draggable:'.item', group:'pages'}"
:element="'ul'">
<li v-for="item in pages" :key="item.id" class="item">
<div>{{ item.title }}</div>
<template v-if="item.children && item.children.length > 0">
<menu-child :childs="item.children"></menu-child>
</template>
</li>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
import MenuChild from './_nested.vue'
export default {
props: ['getMenuPages'],
components: {draggable, MenuChild},
data() {
return {
pages: [
{
"id": 2,
"title": "About",
"nests": null,
},
{
"id": 5,
"title": "East Shaylee",
"nests": [{
"id": 6,
"title": "Einoborough",
"nests": [{
"id": 7,
"title": "East Esperanza",
"nests": [{
"id": 8,
"title": "winborough",
"nests": null
}]
}]
}],
},
]
}
},
}
</script>
<template>
<draggable :list="childs"
class="dragArea"
:options="{draggable:'.item', group:'pages'}"
:element="'ul'">
<li v-for="item in childs" :key="item.id" class="item">
<div>{{ item.title }}</div>
<template v-if="item.children && item.children.length > 0">
<menu-child :childs="item.children"></menu-child>
</template>
</li>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'menu-child',
props: ['childs'],
components: {draggable},
}
</script> @ChrisShen93 sadly still no luck 😢 . @VernalVessel i believe the components are mostly main and child for recursiveness, or do you need more to get the nesting to work ? |
like i have said, your problem is the dragarea's size, you seem to define a min-height for it, while dragarea isn't the 'draggable' component but your nested component, move this class to 'menu-child' component. |
actually whether i added the |
@David-Desmaisons any news on this ? 🐈 |
Hello @ctf0 I need a jsfiddle to work on this to figure out what is the problem. It really seems that this is linked to the usage of draggable and not the compnent itself. |
@David-Desmaisons is it possible for u to make a fiddle that works correctly for nesting and i will try to find out the issue with my comps ? |
Here we go: https://jsfiddle.net/dede89/bfksoj5b/ |
thank you, but this is the same as old one, you can't create new levels of nesting, ex.
|
This is because this example allows only one level of nesting. You should use a recursive component. |
we are going in circles, thanx anyway & apologize for the long ticket. |
recursive example: https://jsfiddle.net/dede89/bfksoj5b/9/ |
@David-Desmaisons fockein awesome, many thanx Update in my comp code above the problem was however what should happen is that draggable creates that item on the fly, otherwise we will have an empty space in our list. old fiddle updated https://jsfiddle.net/bfksoj5b/11/ new "old" problem try to nest Update 2 |
@ctf0 Would it be possible to use your updated fiddle to create an official example for nested draggable tree? It works perfectly however it's slightly hard to find/easy to miss (you need to dig through the github's issues). |
@mariuszjamro i feel u, but honestly this was a daunting issue and i would rather not to go through it again. still. what is the issue u r stuck at atm ? |
@ctf0 i don't have an issue any more - made it work based on info in this issue. Can in submit a PR with draggable tree to the |
will see what i can do |
Any update on this? I'm also dealing with the same issue. |
@mariuszjamro a PR with this kind of example will be welcome |
@David-Desmaisons how can i fix my question like this I have been try many times and read your documents about it , but no way to fix it. the same question with this @ctf0 |
Please can I see the code where it is working. I am trying to create a nested drag and drop menu but not able to add nested children. Any working example would be appreciated. |
I encountered the same issue but a little different. It's not working as I wrapped the <draggable
:list="tree"
:group="{name: 'p1'}"
v-bind="dragOptions"
@start="drag = true"
@end="drag = false"
tag="div"
class="drag-area"
>
<transition-group
type="transition"
:name="!drag ? 'flip-list' : null"
>
<div
class="element-item"
v-for="(item, index) in tree"
:key="item.elementId"
>
<!-- ... -->
<draggable-tree
:tree="item.children"
:parentIndex="parentIndex + (index + 1) + '.'"
></draggable-tree>
</div>
</transition-group>
</draggable> Then it's be fixed after I removed // draggable-tree.vue
<template>
<draggable
:list="tree"
:group="{name: 'p1'}"
v-bind="dragOptions"
tag="ul"
class="drag-area"
>
<li
class="element-item"
v-for="(item, index) in tree"
:key="item.elementId"
>
<div>
<p>
<span>{{ parentIndex + (index + 1) }}</span>
<span>{{ item.content }}</span>
</p>
<p>
{{ item.guideline }}
</p>
</div>
<draggable-tree
:tree="item.children"
:parentIndex="parentIndex + (index + 1) + '.'"
></draggable-tree>
</li>
</draggable>
</template>
<style lang="scss" scoped>
.drag-area {
min-height: 5px;
}
.element-item {
padding: 10px 20px;
border-top: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
}
.element-item:not(:first-child) {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.element-item {
cursor: move;
}
.element-item i {
cursor: pointer;
}
ul,
li {
list-style: none;
}
</style>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
name: 'DraggableTree',
props: {
tree: {
required: true,
type: Array,
},
parentIndex: {
type: String,
default: '',
},
},
data() {
return {};
},
computed: {
dragOptions() {
return {
animation: 200,
disabled: false,
ghostClass: 'ghost',
};
},
},
};
</script> // App.vue
<template>
<draggable-tree :tree="elementList"></draggable-tree>
</template>
<script>
import DraggableTree from './components/DraggableTree.vue';
export default {
components: { DraggableTree },
data() {
return {
elementList: [
{
elementId: '1',
content:
'This is content1',
guideline: 'This is guideline1',
children: [
{
elementId: '1.1',
content:
'This is content1.1',
guideline: 'This is guideline1.1',
children: [
{
elementId: '1.1.1',
content:
'This is content1.1.1',
guideline: 'This is guideline1.1.1',
children: [], // 'children' property should be an empty array not null if it's a leaf node
},
],
},
],
}
]
};
},
computed: {},
mounted() {},
methods: {},
};
</script> |
I have the same problem, I can't make an object with empty children receive a new element |
update
items cant be moved under eachother, only be moved outside.usingv-model="childs"
which is the same array that is used in thev-for
gives error that its an object not array, shouldn't the same item that works forv-for
also works for thev-model
?when moving an item from the nested menu to the parent, the parent list doesnt get updated, even though that both are under the same group name, also tried to use:list="$parent.pages"
but doesnt worktrying to add an item under nest, makes it disappearwhen an item is re-dragged after it was moved out of the nested menu, we get an error and everything stops workingThe text was updated successfully, but these errors were encountered: