How do I move a product div from left or right and up or down using And Store its position

Question

How do I move a product div from left or right and up or down using And Store its position for next time visit

I want to move div with some animation and sequence it and store in using php

Buttons

            <button type="button" href="#addProductModel"  data-toggle="modal" class="btn btn-success card-link px-2!important" style="width: 78px;background-color: #3CB371;border-color: #3CB371 ;color: #302D45">Add</button>
            <button type="button" id="btn-edit-product" class="btn btn-danger" href="#editProductModel" data-toggle="modal" class="btn btn-success card-link px-2!important" style="width: 78px;background-color:#FF7F50;border-color: #FF7F50 ;color: #302D45">Edit</button>
            <span> </span>
            <button type="button" class="btn btn-dark" style="margin-left:30px" >Row Up</button>
            <button type="button" class="btn btn-dark" >Row Down</button>
            <button id="btn_left" type="button" class="btn btn-dark" style="width: 78px;">Left</button>
            <button id="btn_right" type="button" class="btn btn-dark" style="width: 78px;">Right</button>
            <button type="button" class="btn btn-danger"  data-toggle="modal" onclick="fn_delete_img();" style="width: 78px;margin-left:30px;color: #302D45;background-color: #FF6347;border-color: #FF6347">Delete</button>
            <button type="button" class="btn btn-warning" onclick="fn_hide_img();" style="width: 78px;background-color: #FFA500;border-color: #FFA500">Hide</button>
            <button type="button" class="btn btn-warning" onclick="fn_show_img();"  style="width: 78px;background-color: #FFA500;border-color: #FFA500">show</button>
            <button type="button" class="btn btn-primary" style="width: 78px;color: black">Report</button>

Here is Product fetch from database

<div class="container">
   <div class="row" style="color:#FA5C43;font-family:Impact;font-size:24px;">
      <div class="col-sm-12">
         Products
      </div>
   </div>
   <div class="row">
      <?php foreach ( $fetchproduct as $prodduct):?>
      <div class="col-sm-3 col-lg-3 col-md-3 col-xm-3 col-xl-3 col-xs-3" style="padding-top: 23px" id="<?php echo $prodduct->pid;?>">
         <div class="card">
            <!-- <input type="checkbox" class="checkbox" id="check1" style="margin-left: 10px;margin-top: 10px" /> -->
            <input type="checkbox"  name="product_checkbox" class="product_checkbox" id="product_checkbox_<?php echo $prodduct->pid;?>" value="<?php echo $prodduct->pid; ?>" style="margin-left: 8px; margin-top: 8px; position: absolute;left: 0px;top: 0px;"/>
            <img src="<?php echo base_url();echo $prodduct->p_imgthumburl?>" class="card-img-top" alt="">
            <div class="card-body" style="text-align:center;background-color: #303030;font-family:Arial;font-size:13px; height: 170px;">
               <strong style="color:#DCDCDC;font-family:Arial;font-size:19px;"><?php echo $prodduct->p_name_en ;?></strong><br>
               <strong class="card-text" style="color:#FFFFFF;font-family:Arial;font-size:12px;"><?php echo $prodduct->p_description_en ;?></strong>

            </div>
         </div>
      </div>

  <?php endforeach;?>
  </div>
</div>

I did for a left button with a swap function

<script>

    $.fn.swapWith = function(that) {
          var $this = this;
          var $that = $(that);
          // create temporary placeholder
          var $temp = $("<div>");
          // 3-step swap
          $this.before($temp);
          $that.before($this);
          $temp.after($that).remove();
          console.log('swap');
          return $this;
        }

    $('#btn_left').on('click', function(event) {
        event.preventDefault();
        /* Act on the event */
        console.log("InsideLeft Button");
        var currentCheckBoxId = $('input[name=product_checkbox]:checked').val();
        var currentDivId=$("#"+currentCheckBoxId).parent().parent().attr('id');
        var swapCheckBoxId="product_checkbox_4";
        var swapDivId=$("#"+swapCheckBoxId).parent().parent().attr('id');

        $("#"+currentDivId).swapWith("#"+swapDivId);

    });

</script>

Answer 1

Try with this code:

<script type="text/javascript">
$(document).ready(function() {
    $('#moveleft').click(function() {
        $('#textbox').animate({
        'marginLeft' : "-=30px" //moves left
        });
    });
    $('#moveright').click(function() {
        $('#textbox').animate({
        'marginLeft' : "+=30px" //moves right
        });
    });
    $('#movedown').click(function() {
        $('#textbox').animate({
        'marginTop' : "+=30px" //moves down
        });
    });
    $('#moveup').click(function() {
        $('#textbox').animate({
        'marginTop' : "-=30px" //moves up
        });
    });
});
</script>

<div style="padding:20px;"> <button id="moveleft">Move Left</button>  <button id="moveright">Move right</button> <button id="movedown">Move Down</button> <button id="moveup">Move Up</button></div>
<div id="textbox" style="position:absolute;padding:10px;background:#FFFFCC;width:300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.</div>

Go through below url for reference: https://www.sanwebe.com/2011/12/jquery-move-div-leftrightupdown