0

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

Drag and Drop and Sorting

Massimo Costa
  • 1,864
  • 15
  • 23
Sahin
  • 87
  • 1
  • 3
  • 13
  • 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 05:40
  • this is the stackblitz example - https://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 05:41
  • div's are only draggable here and takes the position where its dropped. Where is sorting required and sorting may change the order of the dragged elements ? if yes, then whats the use of dragging anywhere in the list. – Abhishek Kumar Nov 14 '18 at 05:46
  • what i want is, without click everywhere, only icon will be clickable and drag that entire div. now in that example u can click and drag that div everywhere i don't want that. – Sahin Nov 14 '18 at 05:46
  • okay, so you want dragging only to be done via that icon and not through the entire div., and if this is what you want, you can achieve it by using `cdkDragHandle ` in as `reorder` – Abhishek Kumar Nov 14 '18 at 05:50
  • thats not working, because if we use cdkDragHandle, may be sort is not working, correct?, u can check the example now. – Sahin Nov 14 '18 at 06:06
  • I have used that and i am able to drag the elements from that icon only, and is working same as if it was working with dragging anywhere from the whole div. I think this is good to use for making draggable only from icon. Now whole div is draggable only via icon, if we use dragHandle. – Abhishek Kumar Nov 14 '18 at 06:18
  • can u share that codes? i hope excepts that icons other area are not clickable. – Sahin Nov 14 '18 at 06:32
  • 1
    See : https://stackblitz.com/edit/angular-ly7e63?file=src/app/app.component.html , in this is have added only **`cdkDragHandle`** to `` tag, please see and suggest the problems. – Abhishek Kumar Nov 14 '18 at 06:37
  • So do you want a checkbox also, and if checkbox is checked then only that div can be dragged from the icon, and can be dropped anywhere in the list ??, drag from icon only if its checkbox is checked ? – Abhishek Kumar Nov 14 '18 at 06:58
  • hmm sure, its perfect its working for me, thank you.. but only one think is that drag cursor, we have to remove that cursor in other area – Sahin Nov 14 '18 at 07:08
  • 1
    its done, see : https://stackblitz.com/edit/angular-7wyuyg?file=src/app/app.component.css, 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 07:11
  • yes, that check box function also. if only check div can be drag'gable. and if there is add and delete, then its is completed. – Sahin Nov 14 '18 at 07:12

1 Answers1

3

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 the cursor: 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.
Abhishek Kumar
  • 2,501
  • 10
  • 25
  • i am updating this answer with checkbox problem, in a while. – Abhishek Kumar Nov 14 '18 at 07:16
  • 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 its enough code to move ahead, so the rest you can do with this code. The question asked was for making drag from icon and if checkbox is checked, so now its done. Please consider doing rest of the requirement, and an upvote is highly appreciated. – Abhishek Kumar Nov 14 '18 at 10:47
  • 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 glad it worked, and happy to help here. Please upvote this answer as well. thank you. – Abhishek Kumar Nov 14 '18 at 11:50
  • Answers are upvoted for the other people in search of similar related answers, Refer : https://meta.stackexchange.com/questions/139/why-should-i-upvote-a-question – Abhishek Kumar Nov 14 '18 at 11:56