Mixing
Vue.Draggable not letting me move items between lists
Trying to follow this tutorial, but with bi-directional dragging between containers. Reducing the problem to the minimal set of code, I'm able to sort within a list but not between lists. I was under the impression from the documentation that setting both draggables to the same group name would enable it, but that doesn't seem to be the case.
So, what do I need to do in order to just allow items to be moved from one list to another? Here's the code I've tried (which, again, does perfectly for rearranging within the same list)
<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
<v-layout column fill-height>
<h1>This is an about page</h1>
<v-layout row fill-height>
<v-flex xs4>
<draggable class='dragArea' v-model='peopleList'>
<div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
<v-flex xs4>
<draggable class='dragArea' v-model='employeeList'>
<div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
</v-layout>
</v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'About',
data () {
return {
employees: [{ id: 6, name: 'Pete' },
{ id: 7, name: 'Pat' }],
people: [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Mary' },
{ id: 3, name: 'Jane' },
{ id: 4, name: 'Alex' },
{ id: 5, name: 'Jim' }
]
}
},
components: { draggable },
computed: {
employeeList: {
get () {
return this.employees
},
set (value) {
this.employees = value
}
},
peopleList: {
get () {
return this.people
},
set (value) {
this.people = value
}
}
}
}
</script>
<style>
div.dragArea {
border: 1px solid black;
min-width: 100px;
}
</style>
vue.js drag-and-drop
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
add a comment |
Trying to follow this tutorial, but with bi-directional dragging between containers. Reducing the problem to the minimal set of code, I'm able to sort within a list but not between lists. I was under the impression from the documentation that setting both draggables to the same group name would enable it, but that doesn't seem to be the case.
So, what do I need to do in order to just allow items to be moved from one list to another? Here's the code I've tried (which, again, does perfectly for rearranging within the same list)
<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
<v-layout column fill-height>
<h1>This is an about page</h1>
<v-layout row fill-height>
<v-flex xs4>
<draggable class='dragArea' v-model='peopleList'>
<div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
<v-flex xs4>
<draggable class='dragArea' v-model='employeeList'>
<div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
</v-layout>
</v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'About',
data () {
return {
employees: [{ id: 6, name: 'Pete' },
{ id: 7, name: 'Pat' }],
people: [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Mary' },
{ id: 3, name: 'Jane' },
{ id: 4, name: 'Alex' },
{ id: 5, name: 'Jim' }
]
}
},
components: { draggable },
computed: {
employeeList: {
get () {
return this.employees
},
set (value) {
this.employees = value
}
},
peopleList: {
get () {
return this.people
},
set (value) {
this.people = value
}
}
}
}
</script>
<style>
div.dragArea {
border: 1px solid black;
min-width: 100px;
}
</style>
vue.js drag-and-drop
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
add a comment |
Trying to follow this tutorial, but with bi-directional dragging between containers. Reducing the problem to the minimal set of code, I'm able to sort within a list but not between lists. I was under the impression from the documentation that setting both draggables to the same group name would enable it, but that doesn't seem to be the case.
So, what do I need to do in order to just allow items to be moved from one list to another? Here's the code I've tried (which, again, does perfectly for rearranging within the same list)
<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
<v-layout column fill-height>
<h1>This is an about page</h1>
<v-layout row fill-height>
<v-flex xs4>
<draggable class='dragArea' v-model='peopleList'>
<div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
<v-flex xs4>
<draggable class='dragArea' v-model='employeeList'>
<div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
</v-layout>
</v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'About',
data () {
return {
employees: [{ id: 6, name: 'Pete' },
{ id: 7, name: 'Pat' }],
people: [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Mary' },
{ id: 3, name: 'Jane' },
{ id: 4, name: 'Alex' },
{ id: 5, name: 'Jim' }
]
}
},
components: { draggable },
computed: {
employeeList: {
get () {
return this.employees
},
set (value) {
this.employees = value
}
},
peopleList: {
get () {
return this.people
},
set (value) {
this.people = value
}
}
}
}
</script>
<style>
div.dragArea {
border: 1px solid black;
min-width: 100px;
}
</style>
vue.js drag-and-drop
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
Trying to follow this tutorial, but with bi-directional dragging between containers. Reducing the problem to the minimal set of code, I'm able to sort within a list but not between lists. I was under the impression from the documentation that setting both draggables to the same group name would enable it, but that doesn't seem to be the case.
So, what do I need to do in order to just allow items to be moved from one list to another? Here's the code I've tried (which, again, does perfectly for rearranging within the same list)
<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
<v-layout column fill-height>
<h1>This is an about page</h1>
<v-layout row fill-height>
<v-flex xs4>
<draggable class='dragArea' v-model='peopleList'>
<div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
<v-flex xs4>
<draggable class='dragArea' v-model='employeeList'>
<div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
</draggable>
</v-flex>
</v-layout>
</v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'About',
data () {
return {
employees: [{ id: 6, name: 'Pete' },
{ id: 7, name: 'Pat' }],
people: [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Mary' },
{ id: 3, name: 'Jane' },
{ id: 4, name: 'Alex' },
{ id: 5, name: 'Jim' }
]
}
},
components: { draggable },
computed: {
employeeList: {
get () {
return this.employees
},
set (value) {
this.employees = value
}
},
peopleList: {
get () {
return this.people
},
set (value) {
this.people = value
}
}
}
}
</script>
<style>
div.dragArea {
border: 1px solid black;
min-width: 100px;
}
</style>
vue.js drag-and-drop
vue.js drag-and-drop
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
asked Nov 22 '18 at 4:13
PaulPaul
26.8k86295
26.8k86295
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The options parameter applies to the draggable component, not to the children of that element. If you add options to draggable it works as you expect.
<draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
<div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
</draggable>
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423805%2fvue-draggable-not-letting-me-move-items-between-lists%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The options parameter applies to the draggable component, not to the children of that element. If you add options to draggable it works as you expect.
<draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
<div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
</draggable>
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
add a comment |
The options parameter applies to the draggable component, not to the children of that element. If you add options to draggable it works as you expect.
<draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
<div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
</draggable>
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
add a comment |
The options parameter applies to the draggable component, not to the children of that element. If you add options to draggable it works as you expect.
<draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
<div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
</draggable>
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
The options parameter applies to the draggable component, not to the children of that element. If you add options to draggable it works as you expect.
<draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
<div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
</draggable>
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
answered Nov 22 '18 at 10:03
Sumurai8Sumurai8
13.6k83263
13.6k83263
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
add a comment |
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
Damn, don't know how I missed that! Thanks so much!
– Paul
Nov 22 '18 at 18:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423805%2fvue-draggable-not-letting-me-move-items-between-lists%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
