Drag & Drop Circles

• Add Random Circles — add 10 randomly-coloured, randomly-placed circles to the canvas.
• Click-to-Add — when enabled, click anywhere on the canvas to place a new circle at that exact point. Disable to switch back to drag mode.
• Move a Circle — with Click-to-Add disabled (and at least one circle on the canvas), click and drag any circle to a new position. It shrinks while moving; the new center coordinates appear briefly in the info strip above the canvas.
• Reset — remove all circles and clear the canvas.

Resize the browser window at any time to see Bootstrap respond to the environment!