desandro / draggabilly

:point_down: Make that shiz draggable

Home Page:https://draggabilly.desandro.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Avoid element to be dragged and define fixed height

rafaF opened this issue · comments

I'm using Draggabilly and Packery to build a optimized draggable layout as shown in this Codepen: https://codepen.io/rafaF/pen/MWjvjqO

I have some doubts about how to use Packery/Draggabily.

  • The first one is how to convert en element "no-draggable", i.e., avoid to be dragged. I've achieved this by no initializing its Draggabilly instance, but I would like also to not be sorted when dragging others elements.

  • In the other hand, I have not been able to set a fixed height on my Packery layout in order to limit how many elements fits in a column. My idea is that if you move an element to a column that has no free space, the most bottom element should be moved to the other column. I have not found any way to do this.

I have been searching on the docs but I have not been able to find this info, sorry!

Hello! Thanks for reporting this issue and providing a test case.

The first one is how to convert en element "no-draggable", i.e., avoid to be dragged. I've achieved this by no initializing its Draggabilly instance

That's one way to do it

but I would like also to not be sorted when dragging others elements.

You may need to stamp the element in that case

In the other hand, I have not been able to set a fixed height on my Packery layout in order to limit how many elements fits in a column.

Packery is not designed to fixed height. It is designed to have a variable container height, so you can always add more to the bottom. In order to set a fixed height, you would need to overwrite some core Packery functionality, specifically with its packer geometry

Hi @desandro I'm running into a similar issue regarding Draggabilly and stamped areas. Is there a way to permanently prevent draggable elements from being dropped into the stamped area? Do I need to refire the stamp method during each drag? If so, which event should I be waiting for?

Here is an example: https://codepen.io/andrewmowe/pen/Exozzpb