- Unzip
drag-and-drop.zip
- Open
index.html
in browser - Enjoy!
The technologies I used to build this app are: HTML, CSS, and jQuery. The app has been tested in the latest versions of Chrome and Safari.
I used the jQuery UI draggable
and droppable
methods to accomplish this. When a draggable
box is dropped on top of another draggable
box, their positions are swapped using the invisible droppable
boxes (mentioned below) as guides.
Any small box dragged and dropped on the other large square should be moved to that square and swapped with any small box already there
I created invisible droppable
boxes to catch any draggable
boxes being dropped. Note: there are a couple possible ways to interpret "any small box already there" - I implemented it this way to allow multiple boxes to be dropped into the second container into any position in the grid.
I cached the original box set-up, including the invisible droppable
boxes, and rebuilt the DOM on reset to correctly reposition all of the boxes.
Add a button or input to allow the user to randomize the layout and positioning of the small boxes in both large squares
I added a randomize
function that initalized one array for each larger container. When run on click of the button, the function loops through the droppable
boxes, randomly pushes each box into one of the two arrays, then empties the containers and resets them with the arrays of new boxes.