使用JqueryUI获得拖拽式图层顺序_jq 图层排序-优快云博客

本文介绍了如何使用JqueryUI在管理系统的桌面中实现拖拽图层功能，使图层顺序能够根据用户的操作动态变化并保存到数据库。通过引入jquery和jqueryUI库，轻松解决图层顺序保存的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天给一个管理系统的做桌面，桌面采用win风格的磁吸式贴片，图层可以拖动，更换位置。这个很容易实现，很多代码都有。但是我要实现的是将图层的顺序写入数据库，以便下次访问的时候能从数据库读取出来。

试了几个方案都不行，后来发现使用JqueryUI就轻松实现了。

代码如下：

要引入jquery库和jqueryUI库。

<!DOCTYPE HTML>
<html>
<head>

<style>
.item_content ul  {
list-style:none;
text-align:center;
}
.item_content ul li {
width:200px;
height:200px;
float:left;
margin:5px
}
.item_content {
width:100%;
height:100%;
border:0px solid #ccc;
margin:0;
padding-bottom:10px;
background:#636;
padding:0;
text-align:center;
}


.item_content .item {
width:200px;
height:200px;
line-height:200px;
text-align:center;
cursor:pointer;
background:#F60;
float:left;
 

}
.item_content .item img {
width:200px;
height:200px;
border-radius:4px;

}
</style>

<title>我的桌面</title>
</head>
<body>
 
<div class="page-container" style="padding:0;margin:5px;">


 
<div class="item_content">
<ul id="ul">
<li name="li" id="1">
<div class="item">
  <div style="height:120px;width:200px;margin:10px 0;text-align:center;line-height:100px;"> 
                        <span style="font-size:80px;color:#FFF;"> <i class="Hui-iconfont"> </i></span>
                         </div>
                         
                         <div style="height:80xp;text-align:center;line-height:30px;font-size:30px;color:#FFF;">
                         
                         订单管理
                         </div>     
</div>
</li>

                
                 <li name="li" id="2">
<div class="item" style="background:#F90">
     <div style="height:120px;width:200px;margin:10px 0;text-align:center;line-height:100px;"> 
                        <span style="font-size:80px;color:#FFF;"> <i class="Hui-iconfont"> </i></span>
                         </div>
                         
                         <div style="height:80xp;text-align:center;line-height:30px;font-size:30px;color:#FFF;">
                         
                         添加用户
                         </div>     
</div>
</li>
                
                
                <li name="li" id="3">
<div class="item" style="background:#609">
  <div style="height:120px;width:200px;margin:10px 0;text-align:center;line-height:100px;"> 
                        <span style="font-size:80px;color:#FFF;"><a _href="product.html" data-title="藏品管理" style="text-decoration:none;color:#FFF;"> <i class="Hui-iconfont"> </i></a></span>
                         </div>
                         
                         <div style="height:80xp;text-align:center;line-height:30px;font-size:30px;color:#FFF;">
                         
                         <a _href="product.html" data-title="藏品管理" style="text-decoration:none;color:#FFF;">藏品管理</a>
                         </div>     
</div>
</li>
                
                
                <li name="li" id="4">
<div class="item" style="background:#00F">
  <div style="height:120px;width:200px;margin:10px 0;text-align:center;line-height:100px;"> 
                        <span style="font-size:80px;color:#FFF;">
                        
                        <a href="javascript:;" onclick="xs_add('销售管理','store.html')" style="text-decoration:none;color:#FFF;">
                         <i class="Hui-iconfont"> </i>
                         </a>
                         </span>
                         </div>
                         
                         <div style="height:80xp;text-align:center;line-height:30px;font-size:30px;color:#FFF;">
                          
                       <a href="javascript:;" onclick="xs_add('销售管理','store.html')" style="text-decoration:none;color:#FFF;">
                        销售管理</a>
                         </div>     
</div>
</li> 
                
                
</ul>
            
            
</div>
 
 
 
     <div style="clear:both"></div> 
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
  
 <script src="lib/jquery/jquery-ui.js"></script>
          $( ".item_content" ).sortable({
          cursor: "move",
          items :"li",                        //只是li可以拖动
          opacity: 0.6,                       //拖动时，透明度为0.6
          revert: true,                       //释放时，增加动画
          update : function(event, ui){       //更新排序之后
              alert($(this).sortable("toArray"));//重点是这里啦！这里能依次得到每个li的id值。这里是alert出来，当然你也可以拿这里是值去干任何事了。。。比如ajax提交到数据库。就这么简单。
          }
         });
       });
</body>
</html>