您好,登錄后才能下訂單哦!
PHP+jQuery-ui實(shí)現(xiàn)的拖動(dòng)浮動(dòng)層排序布局并將拖動(dòng)后的浮動(dòng)層位置排序結(jié)果保存到數(shù)據(jù)庫實(shí)例。
首先引入jQuery庫和jquery-ui.min.js,接著放置一個(gè)拖動(dòng)時(shí)的加載圖片,和從數(shù)據(jù)庫讀取出來的多個(gè)模塊拖動(dòng)層.modules,及#orderlist用于記錄模塊的排序值 。
<script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='js/jquery-ui.min.js'></script> <div id="loader"></div> <div id="module_list"> <input type="hidden" id="orderlist" value="<?php echo $sort; ?>" /> <!--?php for ($i = 0; $i < $len; $i++) { ?--> <div class="modules" title="<?php echo $sort_arr[$i]; ?>"> <h5 class="m_title">Module: <!--?php echo $sort_arr[$i]; ?--></h5> <p> <!--?php echo $sort_arr[$i]; ?--></p> </div> <!--?php } ?--> <div class="cl"></div> </div>
頁面js:
$(function() { $(".m_title").bind('mouseover', function() { $(this).css("cursor", "move") }); var $show = $("#loader"); //進(jìn)度條 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:新的排列對應(yīng)的ID,order:原排列順序 beforeSend: function() { $show.html("<img src='images/load.gif' /> 正在更新"); }, success: function(msg) { $show.html(""); } }); } }); });
拖動(dòng)后保存到數(shù)據(jù)庫,ajax.php中的代碼:
$order = $_POST['order']; $itemid = trim($_POST['id']); if (!empty($itemid)) { if ($order != $itemid) { $query = mysql" target="_blank" href="http://undefined">mysql_query("update sortlist set sort='$itemid' where id=1"); if ($query) { echo $itemid; } else { echo "none"; } } }
以上就是關(guān)于PHP+jQuery-ui拖動(dòng)浮動(dòng)層排序并保存到數(shù)據(jù)庫實(shí)例的詳細(xì)內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。