susun atur seret jQuery dan simpan hasilnya ke database_jquery

Projek baru-baru ini melibatkan keperluan pengguna untuk menyesuaikan halaman utama Pengguna memerlukan kedudukan modul halaman utama boleh diseret sesuka hati untuk mencapai reka letak yang diperibadikan. Artikel ini menerangkan cara menggunakan PHP untuk melaksanakan reka letak seret dan menyimpan kedudukan reka letak yang diseret ke pangkalan data.

Banyak contoh susun atur seret pada tapak web menggunakan COOKIE pelayar untuk merekodkan kedudukan modul seret pengguna Maksudnya, maklumat kedudukan isihan setiap modul selepas seret direkodkan dalam kuki pelanggan. Apabila pengguna mengosongkan kuki pelanggan atau kuki penyemak imbas tamat tempoh, dan kemudian melawat halaman itu semula, mereka mendapati reka letak dipulihkan kepada keadaan asalnya. Kaedah rakaman kuki ini mudah digunakan, tetapi ia tidak sesuai untuk keperluan seperti pusat peribadi dan halaman utama sistem pengurusan.
Kesan yang dicapai dalam contoh ini:
Susun atur modul halaman yang anda suka dengan menyeretnya.
Catat kedudukan modul selepas menyeret dan merekodkannya dalam pangkalan data.
Reka letak halaman adalah kekal dan boleh dibuka pada bila-bila masa dengan mana-mana penyemak imbas, dan reka letak halaman kekal tidak berubah. (Melainkan pengguna menukar susunan modul sekali lagi, ia tiada kaitan dengan kuki).
Prinsip
Pemalam pengisihan seret digunakan untuk mencapai kesan seretan.
Lulus kedudukan modul yang diseret ke program PHP sebelah pelayan melalui ajax.
Selepas program PHP memproses maklumat lokasi, ia mengemas kini kandungan medan yang sepadan dalam pangkalan data.
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 digunakan untuk memaparkan maklumat segera, seperti memuatkan..., #orderlist ialah medan tersembunyi yang digunakan untuk merekodkan nilai isihan modul. "..." bermaksud bahawa n DIV.modul dikitar Kod yang dijana khusus akan dibincangkan kemudian.
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} 

Mudah, kuncinya ialah memberi .modul gaya apungan:kiri.
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(""); 
        } 
       }); 
    } 
  }); 
}); 

Tindakan pengisihan seret ditulis dalam $list.sortable({...}). Untuk tetapan dan kaedah parameter, sila lihat ulasan kod. Pemalam juery ui yang boleh diisih menyediakan banyak kaedah dan konfigurasi parameter Sila semak
untuk mendapatkan butiran. Selepas menyeret selesai, kaedah kemas kini perlu dilaksanakan, yang perlu menyerahkan kedudukan yang diisih selepas menyeret ke pemprosesan latar belakang melalui ajax.

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

Penerangan: Gelung setiap modul.modules, dapatkan nilai tajuk atribut setiap modul selepas menyeret dan mengisih, dan sambungkan nilai ke dalam rentetan melalui koma. Nilai isihan asal sebelum menyeret diperoleh daripada senarai pesanan medan tersembunyi.
Selepas mendapat nilai pengisihan, berinteraksi dengan program latar belakang melalui ajax.
PHP
update.php menerima dua parameter yang diserahkan oleh ajax bahagian hadapan melalui POST, serta nilai sebelum pengisihan dan nilai selepas pengisihan, dan membandingkan kedua-dua nilai tersebut jika ia tidak sama, medan pengisihan dalam pangkalan data akan dikemas kini , dan seretan selesai Penyimpanan tepat pada masanya selepas mengisih.

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"; 
    } 
  } 
} 

Indeks laman utama.php
Kembali ke laman utama index.php yang memaparkan reka letak. index.php membaca maklumat pengisihan modul dengan menyambung ke pangkalan data dan memaparkan setiap modul.
Pertama, jangan lupa untuk memuatkan perpustakaan jquery dan pemalam pengisihan seretan boleh diisih jquery ui.

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

Baca nilai medan pengisihan pangkalan data.

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); 

Paparkan setiap modul dalam satu gelung.

<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> 

Memang benar bahawa penyimpanan hasil pengisihan seret sebenar dikaitkan dengan maklumat setiap pengguna, jadi anda boleh menyelesaikan reka bentuk struktur pangkalan data sendiri dan menggunakannya sepuas hati anda.

Di atas ialah proses pelaksanaan jQuery yang melaksanakan reka letak seret dan menyimpan hasil pengisihan ke pangkalan data saya harap ia akan membantu pembelajaran semua orang.