PHP+jQuery-ui怎么进行拖动浮动层排序并保存到数据库

本文将详细解释PHP jQuery-ui如何对浮动层进行排序并将它们保存到数据库中。这篇文章的内容质量很高，所以边肖会分享给大家参考。希望你看完这篇文章后有所了解。

Phpquery-UI实现拖动浮动图层对布局进行排序，并将拖动的浮动图层位置排序结果保存到数据库实例中。

首先介绍了jQuery库和jquery-ui.min.js，然后放置了一张拖动时加载的图片，以及多个模块拖动层。从数据库中读取的模块和#orderlist用于记录模块的排序值。

script type=' text/JavaScript ' src=' jquery . js '/script

script type=' text/JavaScript ' src=' js/jquery-ui . min . js '/脚本

divid='loader'/div

divided=' module _ list '

input type=' hidden ' id=' order list ' value='？phpecho $ sort?'/

！- ?服务器端编程语言（Professional Hypertext Preprocessor的缩写）

for($ I=0；$ i $ len$ I){ 0

？-

divclass='modules'title='？phpecho $ sort _ arr[$ I]；'

h4class='m_title'Module:

！- ?phpecho $ sort _ arr[$ I]；- /h4

p

！- ?phpecho $ sort _ arr[$ I]；- /p

/div

！- ?php}？-

divclass='cl'/div

/div

js:页

$(function(){ 0

$('.m _ title’)。绑定('鼠标悬停'，

函数(){ 0

$(这个)。css('光标'，'移动')

});

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='images/load.gif' /> 正在更新"); 
                }, 
                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+jQuery-ui怎么进行拖动浮动层排序并保存到数据库就分享到这里了，希望