如何使用“產品”的位置從左或右，上或下移動產品div

Question

我如何使用左右移動產品div並存儲其位置以供下次訪問

我想用一些動畫移動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>

瀏覽以下網址以供參考： https : //www.sanwebe.com/2011/12/jquery-move-div-leftrightupdown