CODEWITHSUNDEEP
angulartypescriptangular-materialangular-cdk
GRX
GRX

Reputation: 531

Allow horizontal positioning in cdkDropList

In my application I have multiple rows, within those rows are "blocks" that can be dragged between rows which works perfectly.

However, In addition to dragging between rows I'd like to be able to freely position them horizontally as well.

enter image description here

When adding cdkDropListGroup and cdkDroplist, all elements are automatically left aligned.

For example; I'd like the blue "block" to start where the purple one ends using cdkDragDrop.

Upvotes: 2

Views: 2288

Answers (3)

Josh Leslie
Josh Leslie

Reputation: 237

For posterity, the CDK drag/drop directive has been updated to include horizontal functionality

cdkDropListOrientation="horizontal"

e.g.

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
</div>

https://material.angular.io/cdk/drag-drop/overview#list-orientation

Upvotes: 1

Vadiem Janssens
Vadiem Janssens

Reputation: 4109

This, unfortunately, is not possible using cdkDropListGroup. The documentation specifically states elements can not be freely dragged around in a cdkDropList.

When outside of a cdkDropList element, draggable elements can be freely moved around the page.

You could set an initial value using cdkDragFreeDragPosition and snap the object to a grid with the (cdkDragEnded) event.

Upvotes: 1

IDK4real
IDK4real

Reputation: 1042

According to the documentation what you are asking can be done without using the cdkDropListGroup.

Instead you should use the cdkDrag and [cdkDragFreeDragPosition].

The [cdkDragFreeDragPosition] receives and object of the type {x: number, y: number}. These will dictate where inside your element the blocks will appear.

Depending on your implementation, you could simply render the elements, one by one, and create a function that returns the x and y variables for each element. Alternatively, you could create an array that holds all the default placement values.

On a side note, it seems that you want the list organization property from the cdkDropListGroup and cdkDropList directives while simultaneously having the ability to set a custom starting position.

This cannot be done with the current directive. The cdkDropList does not accept the [cdkDragFreeDragPosition] input so you cannot set the position on the x-Axis yourself.

You would need to develop a custom directive to allow for such to occur.

Kind regards.

Upvotes: 1

Related Questions