如何使用 And Store its position 从左侧或右侧向上或向下移动产品 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