Given a grid of 6 pictures. Allow repositioning of the pics with mouse drag. This is one feature that even Instagram doesn't support as of now!
Acceptance Criteria:
- The user has to create an interface with 6
div
s with ids asdiv1, div2, div3, div4, div5 and div6
. Each div should have a child node that is an img tag. - Each image tag inside the div should have ids as
drag1, drag2, drag3, drag4, drag5 and drag6
. The image inside div with id=div1 should have id=drag1, similar for other 5 blocks. - All the 6 images should be draggable and all 6 divs should be droppable so as to enable users to rearrange the images in any pattern.
- When an image is dragged and dropped from one div to another and the div on which we are going to drop contains an image, the images should be swapped between the div from where the image was picked and the div where the image is being dropped.
Please use images that are <10kb