Drag and Drop with sorting it is possible in Angular Material?
Scenario :
From Angular Material cdk version 7.0.3 we have Drag&Drop sorting.
In that Drag&Drop, everywhere in that div we can click and drag.Without click everywhere, only icon will be clickable and drag that entire div.
Now below example u can click and drag that div everywhere i don't want that. i want only click in icon and drag that div with sorting.
Example : https://stackblitz.com/edit/angular-by5l4g
App URL : https://angular-by5l4g.stackblitz.io
angular angular-material angular-material-6 angular-cdk angular-dragdrop
|
show 9 more comments
Scenario :
From Angular Material cdk version 7.0.3 we have Drag&Drop sorting.
In that Drag&Drop, everywhere in that div we can click and drag.Without click everywhere, only icon will be clickable and drag that entire div.
Now below example u can click and drag that div everywhere i don't want that. i want only click in icon and drag that div with sorting.
Example : https://stackblitz.com/edit/angular-by5l4g
App URL : https://angular-by5l4g.stackblitz.io
angular angular-material angular-material-6 angular-cdk angular-dragdrop
please clear the question with an example, and if possible please create a stackblitz demo.
– Abhishek Kumar
Nov 13 '18 at 12:33
Please explain -Drag&Drop handle with sorting
, what you actually want to do with this perfectly running drag and drop example, if possible give an example.
– Abhishek Kumar
Nov 14 '18 at 5:40
this is the stackblitz example - stackblitz.com/edit/angular-acz158 . In that example div will be drag and sorted based on click & drag in everywhere in that div. but what i want is, without click everywhere, only icon will be clickable and drag that div. hope u understand now.
– Sahin
Nov 14 '18 at 5:41
1
See : stackblitz.com/edit/angular-ly7e63?file=src/app/… , in this is have added onlycdkDragHandle
to<i>
tag, please see and suggest the problems.
– Abhishek Kumar
Nov 14 '18 at 6:37
1
its done, see : stackblitz.com/edit/angular-7wyuyg?file=src/app/…, so can i paste this into the answer section, so that other users finding answers will know this is the required answer.
– Abhishek Kumar
Nov 14 '18 at 7:11
|
show 9 more comments
Scenario :
From Angular Material cdk version 7.0.3 we have Drag&Drop sorting.
In that Drag&Drop, everywhere in that div we can click and drag.Without click everywhere, only icon will be clickable and drag that entire div.
Now below example u can click and drag that div everywhere i don't want that. i want only click in icon and drag that div with sorting.
Example : https://stackblitz.com/edit/angular-by5l4g
App URL : https://angular-by5l4g.stackblitz.io
angular angular-material angular-material-6 angular-cdk angular-dragdrop
Scenario :
From Angular Material cdk version 7.0.3 we have Drag&Drop sorting.
In that Drag&Drop, everywhere in that div we can click and drag.Without click everywhere, only icon will be clickable and drag that entire div.
Now below example u can click and drag that div everywhere i don't want that. i want only click in icon and drag that div with sorting.
Example : https://stackblitz.com/edit/angular-by5l4g
App URL : https://angular-by5l4g.stackblitz.io
angular angular-material angular-material-6 angular-cdk angular-dragdrop
angular angular-material angular-material-6 angular-cdk angular-dragdrop
edited Nov 14 '18 at 13:05
Massimo Costa
1,109814
1,109814
asked Nov 13 '18 at 9:55
SahinSahin
199
199
please clear the question with an example, and if possible please create a stackblitz demo.
– Abhishek Kumar
Nov 13 '18 at 12:33
Please explain -Drag&Drop handle with sorting
, what you actually want to do with this perfectly running drag and drop example, if possible give an example.
– Abhishek Kumar
Nov 14 '18 at 5:40
this is the stackblitz example - stackblitz.com/edit/angular-acz158 . In that example div will be drag and sorted based on click & drag in everywhere in that div. but what i want is, without click everywhere, only icon will be clickable and drag that div. hope u understand now.
– Sahin
Nov 14 '18 at 5:41
1
See : stackblitz.com/edit/angular-ly7e63?file=src/app/… , in this is have added onlycdkDragHandle
to<i>
tag, please see and suggest the problems.
– Abhishek Kumar
Nov 14 '18 at 6:37
1
its done, see : stackblitz.com/edit/angular-7wyuyg?file=src/app/…, so can i paste this into the answer section, so that other users finding answers will know this is the required answer.
– Abhishek Kumar
Nov 14 '18 at 7:11
|
show 9 more comments
please clear the question with an example, and if possible please create a stackblitz demo.
– Abhishek Kumar
Nov 13 '18 at 12:33
Please explain -Drag&Drop handle with sorting
, what you actually want to do with this perfectly running drag and drop example, if possible give an example.
– Abhishek Kumar
Nov 14 '18 at 5:40
this is the stackblitz example - stackblitz.com/edit/angular-acz158 . In that example div will be drag and sorted based on click & drag in everywhere in that div. but what i want is, without click everywhere, only icon will be clickable and drag that div. hope u understand now.
– Sahin
Nov 14 '18 at 5:41
1
See : stackblitz.com/edit/angular-ly7e63?file=src/app/… , in this is have added onlycdkDragHandle
to<i>
tag, please see and suggest the problems.
– Abhishek Kumar
Nov 14 '18 at 6:37
1
its done, see : stackblitz.com/edit/angular-7wyuyg?file=src/app/…, so can i paste this into the answer section, so that other users finding answers will know this is the required answer.
– Abhishek Kumar
Nov 14 '18 at 7:11
please clear the question with an example, and if possible please create a stackblitz demo.
– Abhishek Kumar
Nov 13 '18 at 12:33
please clear the question with an example, and if possible please create a stackblitz demo.
– Abhishek Kumar
Nov 13 '18 at 12:33
Please explain -
Drag&Drop handle with sorting
, what you actually want to do with this perfectly running drag and drop example, if possible give an example.– Abhishek Kumar
Nov 14 '18 at 5:40
Please explain -
Drag&Drop handle with sorting
, what you actually want to do with this perfectly running drag and drop example, if possible give an example.– Abhishek Kumar
Nov 14 '18 at 5:40
this is the stackblitz example - stackblitz.com/edit/angular-acz158 . In that example div will be drag and sorted based on click & drag in everywhere in that div. but what i want is, without click everywhere, only icon will be clickable and drag that div. hope u understand now.
– Sahin
Nov 14 '18 at 5:41
this is the stackblitz example - stackblitz.com/edit/angular-acz158 . In that example div will be drag and sorted based on click & drag in everywhere in that div. but what i want is, without click everywhere, only icon will be clickable and drag that div. hope u understand now.
– Sahin
Nov 14 '18 at 5:41
1
1
See : stackblitz.com/edit/angular-ly7e63?file=src/app/… , in this is have added only
cdkDragHandle
to <i>
tag, please see and suggest the problems.– Abhishek Kumar
Nov 14 '18 at 6:37
See : stackblitz.com/edit/angular-ly7e63?file=src/app/… , in this is have added only
cdkDragHandle
to <i>
tag, please see and suggest the problems.– Abhishek Kumar
Nov 14 '18 at 6:37
1
1
its done, see : stackblitz.com/edit/angular-7wyuyg?file=src/app/…, so can i paste this into the answer section, so that other users finding answers will know this is the required answer.
– Abhishek Kumar
Nov 14 '18 at 7:11
its done, see : stackblitz.com/edit/angular-7wyuyg?file=src/app/…, so can i paste this into the answer section, so that other users finding answers will know this is the required answer.
– Abhishek Kumar
Nov 14 '18 at 7:11
|
show 9 more comments
1 Answer
1
active
oldest
votes
Demo with only div draggable from the icon
Application Code : https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts
Approach :
- Change
<i class="material-icons">reorder</i>
to<i class="material-icons" cdkDragHandle >reorder</i>
- Used
cdkDragHandle
to make that icon draggable, and removed thecursor: move
from div, and applied it to<i>
tag.
Update 1 (according to checkbox question):
- another similar
<i>
tag is kept as mask which will not allow drag start if checkbox is not checked, and on checkbox check we enable that mask to go away, so that the div is draggable from the main<i>
tag.
Update 2 (according to delete and add question):
- added delete and add functionality also.
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
1
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
1
@Sahin please see updated links to see theadd and delete
functionality as well, i hope it answers all the requirements now.
– Abhishek Kumar
Nov 14 '18 at 11:35
|
show 5 more comments
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%2f53278295%2fdrag-and-drop-with-sorting-it-is-possible-in-angular-material%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
Demo with only div draggable from the icon
Application Code : https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts
Approach :
- Change
<i class="material-icons">reorder</i>
to<i class="material-icons" cdkDragHandle >reorder</i>
- Used
cdkDragHandle
to make that icon draggable, and removed thecursor: move
from div, and applied it to<i>
tag.
Update 1 (according to checkbox question):
- another similar
<i>
tag is kept as mask which will not allow drag start if checkbox is not checked, and on checkbox check we enable that mask to go away, so that the div is draggable from the main<i>
tag.
Update 2 (according to delete and add question):
- added delete and add functionality also.
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
1
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
1
@Sahin please see updated links to see theadd and delete
functionality as well, i hope it answers all the requirements now.
– Abhishek Kumar
Nov 14 '18 at 11:35
|
show 5 more comments
Demo with only div draggable from the icon
Application Code : https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts
Approach :
- Change
<i class="material-icons">reorder</i>
to<i class="material-icons" cdkDragHandle >reorder</i>
- Used
cdkDragHandle
to make that icon draggable, and removed thecursor: move
from div, and applied it to<i>
tag.
Update 1 (according to checkbox question):
- another similar
<i>
tag is kept as mask which will not allow drag start if checkbox is not checked, and on checkbox check we enable that mask to go away, so that the div is draggable from the main<i>
tag.
Update 2 (according to delete and add question):
- added delete and add functionality also.
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
1
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
1
@Sahin please see updated links to see theadd and delete
functionality as well, i hope it answers all the requirements now.
– Abhishek Kumar
Nov 14 '18 at 11:35
|
show 5 more comments
Demo with only div draggable from the icon
Application Code : https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts
Approach :
- Change
<i class="material-icons">reorder</i>
to<i class="material-icons" cdkDragHandle >reorder</i>
- Used
cdkDragHandle
to make that icon draggable, and removed thecursor: move
from div, and applied it to<i>
tag.
Update 1 (according to checkbox question):
- another similar
<i>
tag is kept as mask which will not allow drag start if checkbox is not checked, and on checkbox check we enable that mask to go away, so that the div is draggable from the main<i>
tag.
Update 2 (according to delete and add question):
- added delete and add functionality also.
Demo with only div draggable from the icon
Application Code : https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts
Approach :
- Change
<i class="material-icons">reorder</i>
to<i class="material-icons" cdkDragHandle >reorder</i>
- Used
cdkDragHandle
to make that icon draggable, and removed thecursor: move
from div, and applied it to<i>
tag.
Update 1 (according to checkbox question):
- another similar
<i>
tag is kept as mask which will not allow drag start if checkbox is not checked, and on checkbox check we enable that mask to go away, so that the div is draggable from the main<i>
tag.
Update 2 (according to delete and add question):
- added delete and add functionality also.
edited Nov 19 '18 at 5:37
answered Nov 14 '18 at 7:15
Abhishek KumarAbhishek Kumar
1,116216
1,116216
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
1
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
1
@Sahin please see updated links to see theadd and delete
functionality as well, i hope it answers all the requirements now.
– Abhishek Kumar
Nov 14 '18 at 11:35
|
show 5 more comments
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
1
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
1
@Sahin please see updated links to see theadd and delete
functionality as well, i hope it answers all the requirements now.
– Abhishek Kumar
Nov 14 '18 at 11:35
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
i am updating this answer with checkbox problem, in a while.
– Abhishek Kumar
Nov 14 '18 at 7:16
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
check stackblitz now, design updated.
– Sahin
Nov 14 '18 at 9:36
1
1
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
@Sahin please see the updated answer links, its now dragging elements whose checkbox is checked, it have to be implemented through having movies as an array of objects, see the code for proper understanding. And if helpful, please upvote the answer, or suggest changes if any.
– Abhishek Kumar
Nov 14 '18 at 10:14
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
Abhishek its nice work. then the remaining are add and delete row ah.
– Sahin
Nov 14 '18 at 10:27
1
1
@Sahin please see updated links to see the
add and delete
functionality as well, i hope it answers all the requirements now.– Abhishek Kumar
Nov 14 '18 at 11:35
@Sahin please see updated links to see the
add and delete
functionality as well, i hope it answers all the requirements now.– Abhishek Kumar
Nov 14 '18 at 11:35
|
show 5 more comments
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%2f53278295%2fdrag-and-drop-with-sorting-it-is-possible-in-angular-material%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
please clear the question with an example, and if possible please create a stackblitz demo.
– Abhishek Kumar
Nov 13 '18 at 12:33
Please explain -
Drag&Drop handle with sorting
, what you actually want to do with this perfectly running drag and drop example, if possible give an example.– Abhishek Kumar
Nov 14 '18 at 5:40
this is the stackblitz example - stackblitz.com/edit/angular-acz158 . In that example div will be drag and sorted based on click & drag in everywhere in that div. but what i want is, without click everywhere, only icon will be clickable and drag that div. hope u understand now.
– Sahin
Nov 14 '18 at 5:41
1
See : stackblitz.com/edit/angular-ly7e63?file=src/app/… , in this is have added only
cdkDragHandle
to<i>
tag, please see and suggest the problems.– Abhishek Kumar
Nov 14 '18 at 6:37
1
its done, see : stackblitz.com/edit/angular-7wyuyg?file=src/app/…, so can i paste this into the answer section, so that other users finding answers will know this is the required answer.
– Abhishek Kumar
Nov 14 '18 at 7:11