1

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

Improve this question
14
  • please clear the question with an example, and if possible please create a stackblitz demo. Commented Nov 13, 2018 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. Commented Nov 14, 2018 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. Commented Nov 14, 2018 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. Commented Nov 14, 2018 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. Commented Nov 14, 2018 at 7:11

1 Answer 1

Reset to default
4

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

i am updating this answer with checkbox problem, in a while.
@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 its nice work. then the remaining are add and delete row ah.
@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.
@Sahin please see updated links to see the add and delete functionality as well, i hope it answers all the requirements now.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.