Как мне переместить товарный элемент влево или вправо, вверх или вниз, используя функцию «Сохранить его»?

Question

Как мне переместить товарный элемент влево или вправо, а также вверх или вниз, используя И сохранить его позицию для следующего посещения

Я хочу переместить div с некоторой анимацией, упорядочить его и сохранить с помощью php

Кнопка

            <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>

Вот выборка товара из базы данных

<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>

я сделал для левой кнопки с функцией свопа

<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

Попробуйте с этим кодом:

<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>

Перейдите по ссылке ниже URL для справки: https://www.sanwebe.com/2011/12/jquery-move-div-leftrightupdown