jQuery实现<div>模块拖动改变布局并将排序结果保存到数据库

2019独角兽企业重金招聘Python工程师标准>>>

  前端页面代码：

  首先调用js文件，js代码调用，循环显示各模块

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 
<script type="text/javascript">
$(function(){   
    $(".m_title4").bind('mouseover',function(){   
        $(this).css("cursor","move")   
    });   
    var $show = $("#loader4");    
    var $orderlist = $("#orderlist4");   
    var $list = $("#module_list4");   
     
    $list.sortable({   
        opacity: 0.6, //设置拖动时候的透明度   
        revert: true, //缓冲效果   
        cursor: 'move', //拖动的时候鼠标样式   
        handle: '.m_title4',  //可以拖动的部位，模块的标题部分   
        update: function(){   
             var new_order = [];  
             var oldid  = []; 
             $list.children(".modules").each(function() {   
                new_order.push(this.title); 
                oldid.push(this.id);  
             });  
             var newid = new_order.join(',');  
             var news  = oldid.join(','); 
             var ids = news.split(',');
             var lens=ids.length;
             $(".button").click(function(){    
                 for(var i=0;i<ids.length;i++){
                     var rs=ids[i];//穿的product_id 
                     var px=i+1;//排序
                     $.ajax({   
                        type: "post",   
                        url: "/admin/admin_memory/sort_update", //服务端处理程序   
                        data: { id: rs,px:px },   //id:新的排列对应的ID,order：原排列顺序   
                        success: function(msg) {  
                             $show.html("");   
                        }   
                     }); 
                 } 
             });
        }   
    });   
}); 
</script>
<style type="text/css">
    #module_list4{margin-left:4px}   
    .modules{float:left; width:133px; height:auto; margin:10px; margin-top:0; border:1px solid #ccc;-webkit-box-shadow:1px 1px 3px #292929;
    -moz-box-shadow:1px 1px 3px #292929;
    box-shadow:1px 1px 3px #292929;} 
    .chanpin dd{ line-height:140%; padding-left:4px; color:#333} 
    .dt{ text-align:center; padding-top:4px} 
    .red{ color:#FF4400; font-weight:bold;font-size:14px;}
    .subject{ font-weight:bold; padding-bottom:2px; font-family:"黑体"; font-size:13px; overflow:hidden; width:131px;height:20px;}
    .m_title4{height:24px; line-height:24px; background:#afc6e9}   
    #loader4{height:24px; text-align:center}  
</style>
<div id="loader4"></div>   
<div id="module_list4">   
   <input type="hidden" id="orderlist4" />   
   <?php foreach($memory_card_list as $key=>$value){?>
       <div class="modules" title="<?php echo $value['sort'];?>" id="<?php echo $value['id'];?>">    
          <dl class="chanpin">
            <dt class="dt" style="position:relative">
              <img src="/uploads/memory_card/<?php echo $value['images_url'];?>" class="m_title4"  alt="<?php echo $value ['subject'];?>" title="<?php echo $value ['subject'];?>" width="126px" style="height:85px;" />
            </dt>
            <dd class="subject" title="<?php echo $value ['subject']."( ".$value ['type_name']." )";?>">
               <?php echo cutStr_yang($value['subject']."( ".$value ['type_name']." )",14);?>
            </dd>
            
            <dd>aa：<span class="red"><?php echo $value ['RMB'];?></span>
            <span style=" float:right">
              <a class="edit" href="<?php echo base_url().index_page();?>/admin/admin_memory_card/update_memory_card/<?php echo $value ['id'];?>" target="dialog" width="914" height="515" mask="true"><img src="/images/index/update.png" title="修改（update）" style="vertical-align:middle" /></a></span></dd>
            <dd style="clear:both">
               bb：<span class="red"><?php echo $value ['HK_dollar'];?></span>
                   <span style=" float:right">
                        <a class="delete" href="<?php echo base_url().index_page();?>/admin/admin_memory_card/del_memory_card/<?php echo $value ['id'];?>" target="ajaxTodo" title="你确定要删除吗？"><img src="/images/index/del.png" title="删除（delete）" style="vertical-align:middle" /></a>
                   </span>
            </dd>
            <dd>台&nbsp;&nbsp;&nbsp; 币：<span class="red"><?php echo $value ['NT_dollar'];?></span></dd>
            
          </dl> 
       </div>
   <?php }?>
    <div style=" text-align:right;height:30px; font-size:15px; font-weight:bold; margin:20px; clear:both;">
      <a href="javascript:void(0);" style="background:url(/images/index/baocun.jpg) no-repeat; width:116px; height:35px; display:block; float:right; margin-bottom:30px; line-height:35px; text-align:center; text-decoration:none" class="button" onclick="return confirm("确认修改顺序?");">确认修改</a>
    </div>
</div>

在控制器admin_memory.php中加入如下代码，用来保存拖动模块的顺序

function sort_update(){
        $id = trim($_REQUEST['id']);
        $sort = trim($_REQUEST['px']);
        $sql="update product set sort='$sort' where id='$id'";
        echo $sql;
        $query=mysql_query($sql);
        if($query){
            echo $query;
        }
    }

这个我是在后期改成自己需要的

原链接地址：http://www.helloweba.com/view-blog-72.html

转载于:https://my.oschina.net/meng527/blog/364369