i'v built a code which allows people to drag items and create a new page...

this is the html code:

2. <section class="has-border">
3. <div style="width: 100%; height: 1000px; background-color: lightyellow;" >
4. <span style="font-size: <%=s1 %>; color: <%=color1 %>" id="makeitmove"><%=request.getParameter("p1")%></span> 
5. <span style="font-size: <%=s2 %>; color: <%=color2 %>" id="makeitmove3"><%=request.getParameter("p2")%></span> 
6. <span style="font-size: <%=s3 %>; color: <%=color3 %>" id="makeitmove4"><%=request.getParameter("p3")%></span>
7. <%if(request.getParameter("i1")!=null)
8.          {%>
9. <img id="mpicture1" width=<%=width1 %> height=<%=h1 %> alt="" src=<%=im1 %>>
10. <% }if(request.getParameter("i2")!=null) {%>
11. <img id="mpicture2" width=<%=width2 %> height=<%=h2 %> alt="" src=<%=im2 %>>
12. <%}if(request.getParameter("i3")!=null) {%>
13. <img id="mpicture3" width=<%=width3 %> height=<%=h3 %> alt="" src=<%=im3 %>>
14. <%} %>
15. 
    
16. 
    

the parameters are not matter!!!! 

this is the jquery code which allow to drag:

2. <script>
3. $(document).ready(function(){
4. $("#makeitmove").draggable( {   containment: "body", scroll: false   } );
5. $("#makeitmove1").draggable( {containment: "body", scroll: false} );
6. $("#makeitmove2").draggable( {containment: "body", scroll: false} );
7. $("#makeitmove3").draggable( {containment: "body", scroll: false} );
8. $("#makeitmove4").draggable( {containment: "body", scroll: false} );
9. $("#mpicture1").draggable( {containment: "body", scroll: false} );
10. $("#mpicture2").draggable( {containment: "body", scroll: false} );
11. $("#mpicture3").draggable( {containment: "body", scroll: false} );
12. 
    
13. });
14. </script>

and after that i found how o get position with percantage!!!!!:

2. function getLeft(id)
3. {
4.    leftStr = $(id).css('left'),
5.        pxPos = leftStr.indexOf('px'),
6.        leftVal = leftStr.substr(0, pxPos),
7.        leftPercent = (leftVal / $(window).width() * 100).toString(),
8.        dotPos = leftPercent.indexOf('.'),
9.        leftPercentStr = dotPos == -1 ? leftPercent + '%' : leftPercent.substr(0, dotPos) + '%';
10.    return leftPercentStr;
12. }
13. function getTop(id )
14. {
15.    topStr = $(id).css('top'),
16.        px1Pos = topStr.indexOf('px'),
17.        topVal = topStr.substr(0, px1Pos),
18.        topPercent = (topVal / $(window).height() * 100).toString(),
19.        dot1Pos = topPercent.indexOf('.'),
20.        topPercentStr = dot1Pos == -1 ? topPercent + '%' : topPercent.substr(0, dot1Pos) + '%';
21.    return topPercentStr;
23. 
    
24. }

now i want that right after dragging the elements their ositions will be saved o my sql:

1. db.insertUpdateDelete("insert into position1 values( '" + getLeft("#mpicture3") + "', '" + getTop("#mpicture3") + "' )");

can anyone helo me?!?!?!?!?! plz