Drag and Drop in container with a limit?

[jinch]

In this forum post:

I came across this codepen by OSUblake:

 

This is ideal for what I need but I will have to limit the number of items that go inside the container. The Items also will be different size squares and rectangles so if possible it would be great to have it constrained to the parent size and not hard coded number of elements. Basically like one of those shape fitting games / how many elements can fit in a given area type of thing.

 

Any advice or point in the right direction would be awesome!

 

Cheers

> j

See the Pen XXYdEO by osublake (@osublake) on CodePen

[Dipscom]

What you are asking is a rather tall order. I very much doubt many people will have the time to get time to write the code necessary (happy to be proven wrong, though).

 

As for pointers, the way I would do it is storing the size of the container element somewhere, working out the total area, then, every time a new item is dropped, you subtract it (plus all other items already in) from the total area available. When the total area is zero or less, you turn off the ability to drop new items into the container.

 

You also wanting different size squares and rectangles will add even more complexity to it, by the way. I would suggest you first get a proof of concept going with squares of the same size before attempting to make it work with shapes of different sizes.