Nested vue-draggable elements
0
I am trying to have nested vue-draggable elements to visually represent a song structure (with potential repetitions).
This is what I came up with as a prototype:
var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>Even being new to Vue.js this seems so not "the way" to go. My concrete problems with this solution are:
- When the grouping element is at the top, I can't drag anything else above it (same applies to the very bottom)
- The dragged structure does not get represented in the data.structure property
- How would I go about nesting even more? Group in group in group...
vue.js vuejs2 draggable
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
add a comment |
0
I am trying to have nested vue-draggable elements to visually represent a song structure (with potential repetitions).
This is what I came up with as a prototype:
var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>Even being new to Vue.js this seems so not "the way" to go. My concrete problems with this solution are:
- When the grouping element is at the top, I can't drag anything else above it (same applies to the very bottom)
- The dragged structure does not get represented in the data.structure property
- How would I go about nesting even more? Group in group in group...
vue.js vuejs2 draggable
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
Try latest version and setdragoverBubble: true
– Owen M
Dec 17 '18 at 1:03
add a comment |
0
0
0
I am trying to have nested vue-draggable elements to visually represent a song structure (with potential repetitions).
This is what I came up with as a prototype:
var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>Even being new to Vue.js this seems so not "the way" to go. My concrete problems with this solution are:
- When the grouping element is at the top, I can't drag anything else above it (same applies to the very bottom)
- The dragged structure does not get represented in the data.structure property
- How would I go about nesting even more? Group in group in group...
vue.js vuejs2 draggable
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
I am trying to have nested vue-draggable elements to visually represent a song structure (with potential repetitions).
This is what I came up with as a prototype:
var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>Even being new to Vue.js this seems so not "the way" to go. My concrete problems with this solution are:
- When the grouping element is at the top, I can't drag anything else above it (same applies to the very bottom)
- The dragged structure does not get represented in the data.structure property
- How would I go about nesting even more? Group in group in group...
var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>var vm = new Vue({
el: "#main",
data: {
"structure": ["Prelude", "Verse", ["Chorus", "Verse"], "Last Chorus"]
},
});#main {
text-align: center;
width: 300px;
background-color: #EEE;
padding:10px;
}
.element {
text-align: center;
padding: 10px;
margin: 5px auto;
border-radius: 10px;
color: #FFF;
font-family: sans-serif;
font-weight: bold;
}
.tag {
width: 150px;
background-color: #007BFF;
}
.group {
width: 175px;
border: 3px solid #CED4DA;
background-color: #FFF;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="main">
<draggable v-for="tag in structure" :options="{group:'tags'}">
<div v-if="!Array.isArray(tag)" class="tag element">
{{tag}}
</div>
<draggable v-else :options="{group:'tags'}" class="group element">
<div v-for="tag2 in tag" class="tag element">
{{tag2}}
</div>
</draggable>
</draggable>
{{structure}}
</div>vue.js vuejs2 draggable
vue.js vuejs2 draggable
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
edited Nov 14 '18 at 20:26
sonovice
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
asked Nov 14 '18 at 20:03
sonovicesonovice
367516
367516
Try latest version and setdragoverBubble: true
– Owen M
Dec 17 '18 at 1:03
add a comment |
Try latest version and setdragoverBubble: true
– Owen M
Dec 17 '18 at 1:03
Try latest version and set
dragoverBubble: true– Owen M
Dec 17 '18 at 1:03
Try latest version and set
dragoverBubble: true– Owen M
Dec 17 '18 at 1:03
add a comment |
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53307959%2fnested-vue-draggable-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53307959%2fnested-vue-draggable-elements%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
Try latest version and set
dragoverBubble: true– Owen M
Dec 17 '18 at 1:03