Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular material 7 use grid with drag and drop

I try to make a mix between this https://material.angular.io/cdk/drag-drop/overview#reordering-lists

and this https://material.angular.io/components/grid-list/overview

But impossible !

I try to do something like

<mat-grid-list cols="2" rowHeight="2:1">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let book of books" cdkDrag>
    <mat-grid-tile class="example-box">{{ book }}</mat-grid-tile>
  </div>
</div>

But the drop doesn't work.

To be clear, I try to do this, with "1", "2", "3", "4" interchangeable by drag&drop with Angular material

Did anyone ever manage to do something like that?

like image 650
Geoffrey Avatar asked Dec 07 '18 19:12

Geoffrey


People also ask

Does Angular support drag and drop?

The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition to horizontal lists and ...

What is cdkDropList?

Transferring Items between lists The cdkDropList directive supports transferring dragged items between two or more lists. You can connect one or more cdkDropList instances together by setting the cdkDropListConnectedTo property or by wrapping the elements in an element with the cdkDropListGroup attribute.

Does Angular material have a grid system?

In the Angular material, we do have a grid layout system similar to the bootstrap grid that is used to create the two-dimensional list view. in the Angular material library, we have a grid list module which is useful to create e the grid layout in our angular.

What is drag and drop Angularjs 7?

The new Drag and Drop feature added to Angular 7 CDK helps to drag and drop the elements from the list. We will understand the working of Drag and Drop Module with the help of an example. The feature is added to cdk. We need to first download the dependency as shown below − npm install @angular/cdk --save.

How do I use drag and drop in angular?

To work with Drag and Drop, we have the module called @angular/cdk/drag-drop which is used to provide the interface to create drag and drop functionality easily. A number of options are available with Drag and Drop as listed below. Basic Drag and Drop. Sorting with Drag and Drop. Drag and Drop with custom drag handle.

What is the @angular/CDK/drag-drop module?

The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition to horizontal lists and locking along an axis.

How to use ngmodule for drag-and-drop elements?

Start by importing DragDropModule into the NgModule where you want to use drag-and-drop features. You can now add the cdkDrag directive to elements to make them draggable.

What is a drag-and-drop class?

A class that is added to cdkDropList when it can receive an item that is being dragged inside a connected drop list. The drag-and-drop module supports animations both while sorting an element inside a list, as well as animating it from the position that the user dropped it to its final place in the list.


1 Answers

This is a workaround -We can use a cdkDropListGroup and create two cdkDropList where one would act like placeholder and using cdkDropListEnterPredicate we can allow user to move the item horizontally simultaneously update the Dom manually to display the placeholder. and when user drops the item we have to manually update the dom and move item into array.

This guy created a work around using flex-wrap.

https://stackblitz.com/edit/angular-nuiviw?file=src%2Fapp%2Fapp.component.html

For Angular Material version 7.3.7 and above - https://stackblitz.com/edit/angular-dyz1eb

like image 54
indrajeet Avatar answered Sep 19 '22 05:09

indrajeet