关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例

首先引入jQuery库和jquery-ui.min.js,接着放置一个拖动时的加载图片，和从数据库读取出来的多个模块拖动层.modules，及#orderlist用于记录模块的排序值 。

  

  
  
  
     
   ">  
    
Module: 
       
    
 
     
  
     
     
     

页面js:

$(function() { 
    $(".m_title").bind('mouseover', 
    function() { 
 $(this).css("cursor", "move") 
    }); 
 
    var $show = $("#loader"); //进度条 
    var $orderlist = $("#orderlist"); 
    var $list = $("#module_list"); 
 
    $list.sortable({ 
 opacity: 0.6, 
 revert: true, 
 cursor: 'move', 
 handle: '.m_title', 
 update: function() { 
     var new_order = []; 
     $list.children(".modules").each(function() { 
  new_order.push(this.title); 
     }); 
     var newid = new_order.join(','); 
     var oldid = $orderlist.val(); 
     $.ajax({ 
  type: "post", 
  url: "update.php", 
  data: { 
      id: newid, 
      order: oldid 
  }, 
  //id:新的排列对应的ID,order：原排列顺序 
  beforeSend: function() { 
      $show.html("

 正在更新"); 
  }, 
  success: function(msg) { 
      $show.html(""); 
  } 
     }); 
 } 
    }); 
});

拖动后保存到数据库，ajax.php中的代码：

$order = $_POST['order']; 
$itemid = trim($_POST['id']); 
if (!empty($itemid)) { 
    if ($order != $itemid) { 
 $query = mysql_query("update sortlist set sort='$itemid' where id=1"); 
 if ($query) { 
     echo $itemid; 
 } else { 
     echo "none"; 
 } 
    } 
}

相关推荐：

PHP视频教程：https://www.php.cn/course/list/29/type/2.html

以上就是关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例的详细内容，更多请关注考高分网其它相关文章！