Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<style type="text/css">
		 .draggable {
		      width: 50px;
		      height: 50px;
		      padding: 0.5em;
		      float: left;
		      margin: 0 10px 10px 0;
		      cursor:move;
		      margin-bottom:20px;
		  }
		  h3 {
		      clear: left;
		  }
	</style>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
	<div>
	    <svg id="svg1 containment-wrapper" style="position: absolute;left:0px;top:0px;width: 100%;height:100%">
                <circle
                	class="ui-widget-content draggable"
                    id="B1"
                    cx="100"
                    cy="200"
                    style="vector-effect:non-scaling-stroke;fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1px"
                    r="20" />
                <circle
                	class="ui-widget-content draggable"
                    id="B2"
                    cx="200"
                    cy="200"
                    style="vector-effect:non-scaling-stroke;fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1px"
                    r="20" />
                <circle
                	class="ui-widget-content draggable"
                    id="B3"
                    cx="300"
                    cy="200"
                    style="vector-effect:non-scaling-stroke;fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1px"
                    r="20" />
                <circle
                	class="ui-widget-content draggable"
                    id="B4"
                    cx="400"
                    cy="200"
                    style="vector-effect:non-scaling-stroke;fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1px"
                    r="20" />
        </svg>
	</div>

	<script type="text/javascript">
		$(document).on("ready", function(){
			var sPositions = localStorage.positions || "{}",
			    positions = JSON.parse(sPositions);
			$.each(positions, function (id, pos) {
				console.log("#" + id + ": " + pos);
			    $("#" + id).attr(pos);
			})
		    $(".draggable").draggable({
		        containment: "#containment-wrapper",
		        stop: function (event, ui) {
				    positions[this.id] = "{'cx': '" + ui.position.left + "', 'cy': '" + ui.position.top + "'}"
				    localStorage.positions = JSON.stringify(positions)
				}
		    }).bind('drag', function(event, ui){
			    event.target.setAttribute('cx', ui.position.left);
			    event.target.setAttribute('cy', ui.position.top);
			});
		})
	</script>
</body>
</html>