Angular Dragula nested bag not working as expected
I have nested complex object as -
Demo is here - https://stackblitz.com/edit/ng2-dragula-base-qwvjyp
ts
tables = [
{ id: 0,
name: "Bad Vamp",
subitems: [
{ name: "one" },
{ name: "two" }
]
},
{
id: 1,
name: "Petrovitch the Slain",
subitems: [
{ name: "three" },
{ name: "four" }
]
}
];
html
<div class="flex" dragula="BAG" [(dragulaModel)]="tables">
<table *ngFor="let table of tables">
<tr>
<td dragula="BAG" [(dragulaModel)]="table.subitems">
<div class="vamp" *ngFor="let item of table.subitems">{{item.name}}</div>
</td>
</tr>
</table>
</div>
GOAL - What I am trying to achieve is to have table which can be re-ordered and the items within the td also must be could be re-ordered. Note : TD can have another table that is why same bag name BAG has been used.
ISSUE - The issue is - items within the cell td is working as expected however tables are not being dragged.
- Its working if I remove the inner BAGS.
- Its working if I drag by clicking on the edge of table. however it should be draggable if user start dragging the cell (td).
angular7 ng2-dragula
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
add a comment |
I have nested complex object as -
Demo is here - https://stackblitz.com/edit/ng2-dragula-base-qwvjyp
ts
tables = [
{ id: 0,
name: "Bad Vamp",
subitems: [
{ name: "one" },
{ name: "two" }
]
},
{
id: 1,
name: "Petrovitch the Slain",
subitems: [
{ name: "three" },
{ name: "four" }
]
}
];
html
<div class="flex" dragula="BAG" [(dragulaModel)]="tables">
<table *ngFor="let table of tables">
<tr>
<td dragula="BAG" [(dragulaModel)]="table.subitems">
<div class="vamp" *ngFor="let item of table.subitems">{{item.name}}</div>
</td>
</tr>
</table>
</div>
GOAL - What I am trying to achieve is to have table which can be re-ordered and the items within the td also must be could be re-ordered. Note : TD can have another table that is why same bag name BAG has been used.
ISSUE - The issue is - items within the cell td is working as expected however tables are not being dragged.
- Its working if I remove the inner BAGS.
- Its working if I drag by clicking on the edge of table. however it should be draggable if user start dragging the cell (td).
angular7 ng2-dragula
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
add a comment |
I have nested complex object as -
Demo is here - https://stackblitz.com/edit/ng2-dragula-base-qwvjyp
ts
tables = [
{ id: 0,
name: "Bad Vamp",
subitems: [
{ name: "one" },
{ name: "two" }
]
},
{
id: 1,
name: "Petrovitch the Slain",
subitems: [
{ name: "three" },
{ name: "four" }
]
}
];
html
<div class="flex" dragula="BAG" [(dragulaModel)]="tables">
<table *ngFor="let table of tables">
<tr>
<td dragula="BAG" [(dragulaModel)]="table.subitems">
<div class="vamp" *ngFor="let item of table.subitems">{{item.name}}</div>
</td>
</tr>
</table>
</div>
GOAL - What I am trying to achieve is to have table which can be re-ordered and the items within the td also must be could be re-ordered. Note : TD can have another table that is why same bag name BAG has been used.
ISSUE - The issue is - items within the cell td is working as expected however tables are not being dragged.
- Its working if I remove the inner BAGS.
- Its working if I drag by clicking on the edge of table. however it should be draggable if user start dragging the cell (td).
angular7 ng2-dragula
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
I have nested complex object as -
Demo is here - https://stackblitz.com/edit/ng2-dragula-base-qwvjyp
ts
tables = [
{ id: 0,
name: "Bad Vamp",
subitems: [
{ name: "one" },
{ name: "two" }
]
},
{
id: 1,
name: "Petrovitch the Slain",
subitems: [
{ name: "three" },
{ name: "four" }
]
}
];
html
<div class="flex" dragula="BAG" [(dragulaModel)]="tables">
<table *ngFor="let table of tables">
<tr>
<td dragula="BAG" [(dragulaModel)]="table.subitems">
<div class="vamp" *ngFor="let item of table.subitems">{{item.name}}</div>
</td>
</tr>
</table>
</div>
GOAL - What I am trying to achieve is to have table which can be re-ordered and the items within the td also must be could be re-ordered. Note : TD can have another table that is why same bag name BAG has been used.
ISSUE - The issue is - items within the cell td is working as expected however tables are not being dragged.
- Its working if I remove the inner BAGS.
- Its working if I drag by clicking on the edge of table. however it should be draggable if user start dragging the cell (td).
angular7 ng2-dragula
angular7 ng2-dragula
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
edited Dec 28 '18 at 11:17
Sunil Singh
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
asked Dec 28 '18 at 11:04
Sunil SinghSunil Singh
6,1472626
6,1472626
add a comment |
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
});
}
});
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%2f53957510%2fangular-dragula-nested-bag-not-working-as-expected%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
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%2f53957510%2fangular-dragula-nested-bag-not-working-as-expected%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
