Google Ad:

Simple Mapping System using PHP and JQuery PHP Script


Simple Mapping System using PHP and JQuery PHP Script

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

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

 

CSS CODE

 

    <style>
          *
          {
                margin: 0;
                padding: 0;
          }
          .bg
          {
                width: 100%;
                margin-top: 41px;
     
          }
          .lot
          {
                background-color: #000000;
                color: #ffffff;
                width: auto;
                max-width: auto;
                height: 20px;
                text-align: center;
                border-radius: 3px;
                cursor: pointer;
                padding: 0px 4px;
                position: absolute;
                text-shadow: 1px 1px 3px #000;
     
          }
          .lot-btn
          {
                background-color: #5cb85c;
                color: #ffffff;
                width: auto;
                height: 25px;
                text-align: center;
                border-radius: 3px;
                position: absolute;
                cursor: pointer;
                padding: 2px 5px;
                top: -3px;
                right: 15px;
     
          }
     
                .back
                {
                      right: 165px !important;
                      background-color: #444 !important;
     
                }
     
     
     
          .fix
          {
                position: fixed !important;
          }
          .well
          {
                opacity: .9;
                width: 100%;
                top: 0px;
                z-index: 999991;
          }
     
          #draggable {border:1px solid; width: 150px; height: 150px; padding: 0.5em; }
          </style>

 

HTML CODE

 

    <body>
    <img src="map.png" class="bg"/>
    <?php 
                                                                      $cemetery_lot_query = mysqli_query($con, "SELECT * FROM drag");
                                                                      while($cemetery_lot_row = mysqli_fetch_array($cemetery_lot_query))
                                                                            {
     
                                                                                  $drag_id = $cemetery_lot_row['drag_id'];
                                                                                  $x_coordinates = $cemetery_lot_row['top'];
                                                                                  $y_coordinates = $cemetery_lot_row['left'];
                                                                                  $name = $cemetery_lot_row['name'];
                                                                ?>
    <script>
      $(function() {
     
     $( "#draggablec<?php echo $drag_id ?>" ).resizable();
     
    var coordinates = function(element) {
        element = $(element);
        var top = element.position().top;
        var left = element.position().left;
     
        $('#results<?php echo $drag_id ?>').text('X: ' + left + ' ' + 'Y: ' + top);
        $('#left<?php echo $drag_id ?>').val(left);
        $('#top<?php echo $drag_id ?>').val(top);
     
    }
     
     
    $("#sniper<?php echo $drag_id ?>").draggable({
        start: function() {
            coordinates('#sniper<?php echo $drag_id ?>');
        },
        stop: function() {
            coordinates('#sniper<?php echo $drag_id ?>');
        }
     
     
    });
     
           });   
      </script>
     <style>
      #draggable<?php echo $drag_id; ?> {
    position: relative;
    left: -15px;
    }
     
      </style>                        
     
     
                      <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;">
     
     
                            <div class="lot" style="background-color: #000;;"><?php echo $name; ?></div>
     
     
                      </div>
     
     
                                  <form action="save.php" method="POST">
                                  <input type="hidden" name="top<?php echo $drag_id; ?>" id="top<?php echo $drag_id; ?>" value="<?php echo $x_coordinates; ?>">
                                  <input type="hidden" name="left<?php echo $drag_id; ?>" id="left<?php echo $drag_id; ?>" value="<?php echo $y_coordinates; ?>">
                                  <input type="hidden      " name="drag_id1"  value="<?php echo $drag_id; ?>" style="display: none;">
     
                                                                <?php } ?>
     
     
                      <div class="container-fluid">
                            <div class="row">                        
                                  <div class="well well-sm fix">
                                        <div class="col-lg-12">
                                              <button  class="lot-btn btn" type="submit">Save Location<span class="glyphicon glyphicon-floppy-saved"></span></button>
     
                                        </div>      
                                  </div>
                            </div>
                      </div>
                                  </form>            
     
    </body>

 

 

Read Me

 



Find More Simple Mapping System using PHP and JQuery PHP Script

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

Categories