JS project (Write some code)

select svg elements(cirlce, line etc..) and drag/drop. User must be able to select single or multiple elements.

details:
1. selection - select 1 or multiple elements by:
(a) clicking elements to select/deselect - for multiple elemants Ctrl click
(b) dragging mouse to make selection. show css outline box while dragging. (see attached image for explanation border-outine-for-selection.png)

2. drag drag/drop selected elements with mouse or move with keyboard arrows

code:
vanilla JS
no libraries except for jquery (if required)
no node.js

i require well written professional code, not quick code.
can use ES6/7/8 as long as supported by major browsers. i dont care about internet explorer, no polyfill required.

jqueryUI has a nice draggable() and selectable() plugins which you can use/modify if you think it is best or create from scratch.


3. attached:
you must use the attached svg-sample1.html. it has a few circles and lines.