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

藏色散人
Freigeben: 2023-04-08 13:18:01
nach vorne
3141 Leute haben es durchsucht

PHP+jQuery-ui实现的拖动浮动层排序布局并将拖动后的浮动层位置排序结果保存到数据库实例。

65908cc6b9be00de4a41a0eb494560a.png

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

  

Module:

Nach dem Login kopieren

页面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(""); } }); } }); });
Nach dem Login kopieren

拖动后保存到数据库,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"; } } }
Nach dem Login kopieren

相关推荐:

PHP视频教程://m.sbmmt.com/course/list/29/type/2.html

Das obige ist der detaillierte Inhalt von关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
php
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!