If you are looking for Mapping System then you are at the right place. In this tutorial, we are going to learn how to make a draggable in mapping system and save the location. You can use this simple tutorial on your website or a system.

Creating form for the user where they can drag and can save the location as you can see in the image below.



As you can see the W, X, Y, and Z in the image above that's the four letters for the user that they can drag and to save the current location.

Form Source Code

1. <form
   
   action
   
   =
   
   "save.php"
   
   method
   
   =
   
   "POST"
   
   >
   
2. <input
   
   type
   
   =
   
   "hidden"
   
   name
   
   =
   
   "top<?php echo $drag_id; ?>
   
   " id="top<?php echo $drag_id; ?>
   
   " value="<?php echo $x_coordinates; ?>
   
   ">
   
3. <input
   
   type
   
   =
   
   "hidden"
   
   name
   
   =
   
   "left<?php echo $drag_id; ?>
   
   " id="left<?php echo $drag_id; ?>
   
   " value="<?php echo $y_coordinates; ?>
   
   ">
   
4. <input
   
   type
   
   =
   
   "hidden "
   
   name
   
   =
   
   "drag_id1"
   
   value
   
   =
   
   "<?php echo $drag_id; ?>
   
   " style="display: none;">
   
5. 
   
6. <div
   
   class
   
   =
   
   "container-fluid"
   
   >
   
7. <div
   
   class
   
   =
   
   "row"
   
   >
   
8. <div
   
   class
   
   =
   
   "well well-sm fix"
   
   >
   
9. <div
   
   class
   
   =
   
   "col-lg-12"
   
   >
   
10. <button
    
    class
    
    =
    
    "draggable_style-btn"
    
    type
    
    =
    
    "submit"
    
    >
    
    Save Location<span
    
    class
    
    =
    
    "glyphicon glyphicon-floppy-saved"
    
    ></
    
    span
    
    ></
    
    button
    
    >
    
11. </
    
    div
    
    >
    
12. </
    
    div
    
    >
    
13. </
    
    div
    
    >
    
14. </
    
    div
    
    >
    
15. </
    
    form
    
    >
    

Result



Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download