Best way to structure a widget with SVGs

  html, javascript, svg

I am looking for a bit of wisdom from someone with a bit of experience working with SVGs. I am attempting to create a drag and drop widget using SVGs in HTML similar to Tetris (except you can move the blocks any which way). As of now, I have a canvas with a bunch of SVG’s for each block:

  • Canvas
    • SVG A
    • SVG B
    • SVG C
    • SVG D

Each SVG has its own event listeners so I can drag each block but I soon want to add grid-snapping and prevent overlapping. What would be the best way to structure my code? Should I re-structure my code to be one big SVG instead of a canvas and have each block be an element of the SVG? What would be the pros and cons of each direction?

enter image description here

Source: Ask Javascript Questions