Simple Mapping System using PHP and JQuery

Submitted by jaredgwapo on Tuesday, December 22, 2015 - 17:53.
Language
PHP
In this tutorial, we are going to learn to learn how to make a drag and drop system and save its location. This is a simple project that you can use in your website or system.

DIRECTIONS

PUT THE LINKS INSIDE YOUR HEAD TAG

  1. <script src="jquery.min.js"></script>
  2. <script src="j2.js"></script> <!-- draggable js -->

CSS CODE

  1. <style>
  2.         *
  3.         {
  4.                 margin: 0;
  5.                 padding: 0;
  6.         }
  7.         .bg
  8.         {
  9.                 width: 100%;
  10.                 margin-top: 41px;
  11.                
  12.         }
  13.         .lot
  14.         {
  15.                 background-color: #000000;
  16.                 color: #ffffff;
  17.                 width: auto;
  18.                 max-width: auto;
  19.                 height: 20px;
  20.                 text-align: center;
  21.                 border-radius: 3px;
  22.                 cursor: pointer;
  23.                 padding: 0px 4px;
  24.                 position: absolute;
  25.                 text-shadow: 1px 1px 3px #000;
  26.                
  27.         }
  28.         .lot-btn
  29.         {
  30.                 background-color: #5cb85c;
  31.                 color: #ffffff;
  32.                 width: auto;
  33.                 height: 25px;
  34.                 text-align: center;
  35.                 border-radius: 3px;
  36.                 position: absolute;
  37.                 cursor: pointer;
  38.                 padding: 2px 5px;
  39.                 top: -3px;
  40.                 right: 15px;
  41.        
  42.         }
  43.  
  44.                 .back
  45.                 {
  46.                         right: 165px !important;
  47.                         background-color: #444 !important;
  48.  
  49.                 }
  50.                
  51.                
  52.                
  53.         .fix
  54.         {
  55.                 position: fixed !important;
  56.         }
  57.         .well
  58.         {
  59.                 opacity: .9;
  60.                 width: 100%;
  61.                 top: 0px;
  62.                 z-index: 999991;
  63.         }
  64.  
  65.         #draggable {border:1px solid; width: 150px; height: 150px; padding: 0.5em; }
  66.         </style>

HTML CODE

  2. <img src="map.png" class="bg"/>
  3. <?php
  4.                                                                                         $cemetery_lot_query = mysqli_query($con, "SELECT * FROM drag");
  5.                                                                                         while($cemetery_lot_row = mysqli_fetch_array($cemetery_lot_query))
  6.                                                                                                 {
  7.                                                                                                        
  8.                                                                                                         $drag_id = $cemetery_lot_row['drag_id'];
  9.                                                                                                         $x_coordinates = $cemetery_lot_row['top'];
  10.                                                                                                         $y_coordinates = $cemetery_lot_row['left'];
  11.                                                                                                         $name = $cemetery_lot_row['name'];
  12.                                                                                 ?>
  14.   $(function() {
  15.  
  16.  $( "#draggablec<?php echo $drag_id ?>" ).resizable();
  17.  
  18. var coordinates = function(element) {
  19.     element = $(element);
  20.     var top = element.position().top;
  21.     var left = element.position().left;
  22.  
  23.     $('#results<?php echo $drag_id ?>').text('X: ' + left + ' ' + 'Y: ' + top);
  24.     $('#left<?php echo $drag_id ?>').val(left);
  25.     $('#top<?php echo $drag_id ?>').val(top);
  26.                        
  27. }
  28.  
  29.  
  30. $("#sniper<?php echo $drag_id ?>").draggable({
  31.     start: function() {
  32.         coordinates('#sniper<?php echo $drag_id ?>');
  33.     },
  34.     stop: function() {
  35.         coordinates('#sniper<?php echo $drag_id ?>');
  36.     }
  37.        
  38.        
  39. });
  40.    
  41.        });  
  42.   </script>
  43.  <style>
  44.   #draggable<?php echo $drag_id; ?> {
  45. position: relative;
  46. left: -15px;
  47. }
  48.  
  49.   </style>                             
  50.  
  51.  
  52.                         <div id="sniper<?php echo $drag_id ?>" style="position: absolute; top: <?php echo $x_coordinates; ?>px; left: <?php echo $y_coordinates; ?>px; z-index: 9999; height: 20px; width: 20px;">
  53.  
  54.                                
  55.                                 <div class="lot" style="background-color: #000;;"><?php echo $name; ?></div>
  56.                
  57.                
  58.                         </div>
  59.                                                
  60.                                                                                        
  61.                                         <form action="save.php" method="POST">
  62.                                         <input type="hidden" name="top<?php echo $drag_id; ?>" id="top<?php echo $drag_id; ?>" value="<?php echo $x_coordinates; ?>">
  63.                                         <input type="hidden" name="left<?php echo $drag_id; ?>" id="left<?php echo $drag_id; ?>" value="<?php echo $y_coordinates; ?>">
  64.                                         <input type="hidden     " name="drag_id1"  value="<?php echo $drag_id; ?>" style="display: none;">
  65.        
  66.                                                                                 <?php } ?>
  67.                                        
  68.                        
  69.                         <div class="container-fluid">
  70.                                 <div class="row">                              
  71.                                         <div class="well well-sm fix">
  72.                                                 <div class="col-lg-12">
  73.                                                         <button  class="lot-btn btn" type="submit">Save Location<span class="glyphicon glyphicon-floppy-saved"></span></button>
  74.                                                                        
  75.                                                 </div> 
  76.                                         </div>
  77.                                 </div>
  78.                         </div>
  79.                                         </form>        
  80.        
  81. </body>
So what can you say about this simple project? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
drag
Draggable
Mapping
php
jQuery
Javascript

Comments