jQuery는 레이아웃을 드래그하고 그 결과를 Database_jquery에 저장합니다.

최근 프로젝트에서는 사용자가 홈페이지를 사용자 정의해야 하는 경우가 있는데, 사용자는 개인화된 레이아웃을 얻기 위해 홈페이지 모듈의 위치를 ​​마음대로 드래그할 수 있어야 합니다. 이 기사에서는 PHP를 사용하여 드래그 레이아웃을 구현하고 드래그된 레이아웃 위치를 데이터베이스에 저장하는 방법을 설명합니다.

웹사이트의 드래그 레이아웃의 많은 예는 브라우저의 COOKIE를 사용하여 사용자가 드래그한 모듈의 위치를 ​​기록합니다. 즉, 드래그 후 각 모듈의 정렬 위치 정보가 클라이언트의 쿠키에 기록됩니다. 사용자가 클라이언트의 쿠키를 삭제하거나 브라우저의 쿠키가 만료된 후 페이지를 다시 방문하면 레이아웃이 원래 상태로 복원된 것을 확인할 수 있습니다. 이 쿠키 기록 방법은 사용이 간편하지만 개인 센터 및 관리 시스템 홈페이지 등의 요구 사항에는 적합하지 않습니다.
이 예에서 얻은 효과:
드래그하여 원하는 대로 페이지 모듈을 레이아웃합니다.
드래그 후 모듈의 위치를 ​​기록하여 데이터베이스에 기록합니다.
페이지 레이아웃은 영구적이며 언제든지 모든 브라우저에서 열 수 있으며 페이지 레이아웃은 변경되지 않습니다. (사용자가 모듈의 순서를 다시 변경하지 않는 한, 쿠키와는 아무런 관련이 없습니다.)
원칙
드래그 정렬 플러그인은 드래그 효과를 얻는 데 사용됩니다.
드래그한 모듈의 위치를 ​​ajax를 통해 서버측 PHP 프로그램에 전달합니다.
PHP 프로그램은 위치 정보를 처리한 후 데이터베이스의 해당 필드 내용을 업데이트합니다.
XHTML

<div id="loader"></div> 
<div id="module_list"> 
  <input type="hidden" id="orderlist" /> 
  <div class="modules" title="1"> 
   <h3 class="m_title">Module:1</h3> 
   <p>1</p> 
  </div> 
  ... 
</div> 

DIV#loader는 로딩...과 같은 프롬프트 정보를 표시하는 데 사용되며, #orderlist는 모듈의 정렬 값을 기록하는 데 사용되는 숨겨진 필드입니다. "..."는 n DIV.modules가 순환된다는 것을 의미합니다. 생성된 특정 코드는 나중에 설명됩니다.
CSS

#module_list{margin-left:4px} 
.modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9; 
 background:#e8f5fe} 
.m_title{height:24px; line-height:24px; background:#afc6e9} 
#loader{height:24px; text-align:center} 

간단합니다. 핵심은 .modules에 float:left 스타일을 제공하는 것입니다.
jQuery

$(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("<img src='load.gif' /> 正在更新"); 
        }, 
        success: function(msg) { 
           //alert(msg); 
           $show.html(""); 
        } 
       }); 
    } 
  }); 
}); 

드래그 정렬 작업은 $list.sortable({...})에 작성됩니다. 매개변수 설정 및 방법은 코드 주석을 참조하세요. juery ui의 정렬 가능 플러그인은 다양한 방법과 매개변수 구성을 제공합니다. 자세한 내용은
을 확인하세요. 드래그가 완료된 후에는 업데이트 메소드를 실행해야 하는데, 드래그 후 정렬된 위치를 ajax를 통해 백그라운드 처리에 제출해야 합니다.

var new_order = []; 
$list.children(".modules").each(function() { 
   new_order.push(this.title); 
}); 
var newid = new_order.join(','); 
var oldid = $orderlist.val(); 

설명: 각 module.modules를 반복하여 드래그 및 정렬한 후 각 모듈의 속성 제목 값을 얻고 해당 값을 쉼표를 통해 문자열로 연결합니다. 드래그하기 전의 원래 정렬 값은 숨겨진 필드 순서 목록에서 가져옵니다.
정렬 값을 얻은 후 ajax를 통해 백그라운드 프로그램과 상호 작용합니다.
PHP
update.php는 프론트엔드 ajax가 POST를 통해 제출한 두 개의 매개변수와 정렬 전 값, 정렬 후 값을 수신하고 두 값이 동일하지 않으면 데이터베이스의 정렬 필드를 업데이트합니다. , 정렬 후 드래그가 완료됩니다.

include_once("connect.php");//连接数据库 
$order = $_POST['order']; 
$itemid = trim($_POST['id']); 
if (!emptyempty ($itemid)) { 
  if ($order != $itemid) { 
    $query = mysql_query("update sortlist set sort='$itemid' where id=1"); 
    if ($query) { 
      echo $itemid; 
    } else { 
      echo "none"; 
    } 
  } 
} 

홈페이지 index.php
레이아웃을 표시하는 홈페이지 index.php로 돌아갑니다. index.php는 데이터베이스에 연결하여 모듈의 정렬 정보를 읽어 각 모듈을 표시합니다.
먼저 jquery 라이브러리와 jquery ui의 정렬 가능한 드래그 정렬 플러그인을 로드하는 것을 잊지 마세요.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

데이터베이스의 정렬 필드 값을 읽습니다.

include_once("connect.php"); 
 
$query=mysql_query("select * from sortlist where id=1"); 
if($rs=mysql_fetch_array($query)){ 
  $sort=$rs['sort']; 
} 
$sort_arr=explode(",",$sort); 
$len=count($sort_arr); 

각 모듈을 루프로 표시합니다.

<div id="loader"></div> 
<div id="module_list"> 
 <input type="hidden" id="orderlist" value="<&#63;php echo $sort;&#63;>" /> 
 <&#63;php 
   for($i=0;$i<$len;$i++){ 
 &#63;> 
 <div class="modules" title="<&#63;php echo $sort_arr[$i]; &#63;>"> 
   <h3 class="m_title">Module:<&#63;php echo $sort_arr[$i]; &#63;></h3> 
   <p><&#63;php echo $sort_arr[$i]; &#63;></p> 
 </div> 
 <&#63;php } &#63;> 
</div> 

실제 드래그 정렬 결과의 저장은 각 사용자의 정보와 연관되어 있기 때문에 데이터베이스의 구조 설계를 스스로 해결하고 마음껏 사용할 수 있는 것이 사실입니다.

위는 드래그 레이아웃을 구현하고 정렬 결과를 데이터베이스에 저장하는 jQuery의 구현 과정입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.