its not working for me..

its not working for me..

<!DOCTYPE html >
<html>

<head>
<style>
.draggable {
width: 200px;
height: 200px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
cursor: move;
}
.draggable,
a {
cursor: move;
}
#draggable,
#draggable2 {
margin-bottom: 20px;
cursor: move;
}

#draggable {
cursor: move;
}

#draggable2 {
cursor: e-resize;
}

#containment-wrapper {
width: 100px;
height: 100px;
border: 2px solid rgb( 204, 30, 30);
padding: 10px;
}

h3 {
clear: left;
}
< /style>

</head>

<body>

<div id= "containment-wrapper" >
<div id= "draggable" class= "ui-widget-content draggable" >TEST
<input type= "text" class= "form-control" formControlName= "cr" >
</div>
<div id= "draggable" class= "ui-widget-content draggable" >TEST
<input type= "text" class= "form-control" formControlName= "cr" >
</div>
</div>


<script>
$( function () {
var positions = JSON. parse( localStorage. positions || "{}");
$( function () {
var d = $( "[id=draggable]"). attr( "id", function ( i) {
return "draggable_" + i
})
$. each( positions, function ( id, pos) {
$( "#" + id). css( pos)
})

d. draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function ( event, ui) {
positions[ this. id] = ui. position
localStorage. positions = JSON. stringify( positions)
}
});
});
});

< /script>
</body>

</html>