如何使用“产品”的位置从左或右，上或下移动产品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