icon

Drag and Drop Circles

Experience the collaboration of HTML5, JavaScript, CSS and Bootstrap4 as you place and move circles in a responsive canvas.


sandbox
  • 'Add Random Circles': Add 10 randomly-colored, randomly-placed circles.
  • 'Click-to-Add': When enabled, click the canvas to create individual circles. Disable to select a circle for dragging-dropping.
  • Move a Circle: With 'Click-to-Add' disabled, (and at least one circle present!) click and drag a 'targetCircle' to a new position. While moved, it reduces size. The new center is temporarily displayed in the upper display.
  • 'Reset': Remove all circles and clear canvas.

Resize the browser at any time to see how Bootstrap allows the app to respond to environmental changes!