Topic: Drag and drop lock axis on mdbSortableContainer
Expected behavior*To have blocked axis in mdbSortableContainer*Actual behavior[lockAxis]="'y'" does not work
Resources (screenshots, code snippets etc.)
<div mdbSortableContainer #draggableContainer class="sortable-list" (itemDrop)="onDrop($event)" > <div [boundaryElement]="draggableContainer" mdbDraggable [lockAxis]="'y'" *ngFor="let item of items" class="sortable-item" [handle]="handle" >
would just like to add here after testing, this issue is still present html:
<section
#draggableContainer
class="border p-4 mb-4 mt-5"
style="height: 400px;width: 350px; overflow: hidden;"
mdbSortableContainer
>
<div mdbDraggable class="draggable shadow-1-strong" [boundaryElement]="draggableContainer" [lockAxis]="'x'" >
<p>Drag me1!</p>
</div>
<div mdbDraggable class="draggable shadow-1-strong" [boundaryElement]="draggableContainer" [lockAxis]="'x'" >
<p>Drag me2!</p>
</div>
</section>
the moment you decorate the parent container with mdbsortablecontainer then the draggable components, boundaryelement and lockaxis directives stop working and you can drag the boxes outside the container and also both lockaxis y and x do not work. Is there any plans to fix this so we can bound the draggable elements inside a container on X or Y and still be able to have a sortable container?
Arkadiusz Idzikowski staff commented 6 days ago
We planned to add fixes that would allow you to use both features simultaneously, but we encountered numerous issues and were forced to postpone this in favor of higher-priority fixes.
We'll try to take a closer look at this before the next release.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.3.0
- Device: computer
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
Thank you for reporting this problem, it looks like there is a bug on our end. We will take a closer look at that and fix it as soon as possible.