Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Drag and Drop in container with a limit?

Recommended Posts

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!



> j

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.