Drag and Drop But After page Reload Table Takes Its original Position back.Plz help me

Drag and Drop But After page Reload Table Takes Its original Position back.Plz help me

Dear sir,
My Code is 
//----JavaScript Function For Second Div which are  Drag Table From One Div(source) to another Div(Targate)
<script>
function allowDrop(ev) {
    ev.preventDefault();
    
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));

}
</script>

<body>
    <form id="form1" runat="server">
<div id="content_dv1" runat="server">
<table border="1" id="drggble_tble" draggable="true" ondragstart="drag(event)" width="400"
                    onmousemove="myFunction(event)">
                    <tr style="width: 200px;">
                        <th>
                            Employee Id
                        </th>
                        <th>
                            Employee Name
                        </th>
                        <th>
                            Employee DOJ
                        </th>
                    </tr>
                    <%=GetEmployeeData()%>//This code comming from server//
                </table>

</div>
<!--Targate Div-->
<div style="height: 150px; width: 50%; margin-left: 20%;" ondrop="drop(event)" ondragover="allowDrop(event)">
</form>
    </body>
This code work Properly For Drag Table From One Div To another Div But When i refresh the page table takes its previous position.