您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

使用 PHP 與 Dojo 實現拖放佈局並儲存至資料庫

編輯：PHP 綜合知識

前言

在 Web 應用開發中，讓使用者自訂儀表板或頁面區塊的排列順序是常見需求。本文示範如何結合 PHP（搭配 MSSQL）與 Dojo Toolkit 的拖放（Drag & Drop）API，將使用者調整後的區塊位置即時寫入資料庫，實現個性化佈局持久化。

核心架構

後端：PHP 5 + MSSQL，負責讀寫模組位置資料。
前端：Dojo 0.3.1 的 dojo.dnd.HtmlDragSource 與 HtmlDropTarget 處理拖放互動。
資料流：頁面載入 → 從資料庫讀取使用者既有佈局 → 渲染可拖放區塊 → 使用者拖放 → 按「保存布局」 → JavaScript 組合新順序 → 送至 savegr.php 寫入資料庫。

關鍵程式碼解析

1. 讀取模組與初始化拖放目標

<?php
session_start();
if ($_SESSION['gh'] == '') { header('location:login.php'); }
include("config.php");
$sql = "select * from module";
$result = mssql_query($sql, $conn);
$num = mssql_num_rows($result);
?>
<script type="text/javascript" src="include/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.style");
dojo.require("dojo.dnd.*");

function init() {
    // 註冊所有 class="divdrag" 的元素為可拖放來源
    var arr = dojo.html.getElementsByClass('divdrag');
    for (var i = 0; i < arr.length; i++) {
        var parentDiv = arr[i].parentNode.id;
        new dojo.dnd.HtmlDragSource(arr[i], parentDiv);
    }
    // 定義容器之間的放置關係
    var containers = ["container0"];
    <?php for ($p = 1; $p <= $num; $p++) { echo '"container' . $p . '",'; } ?>
    new dojo.dnd.HtmlDropTarget("container0", containers);
    <?php
    for ($p = 1; $p <= $num; $p++) {
        echo 'new dojo.dnd.HtmlDropTarget("container' . $p . '", ["container0",';
        for ($o = 1; $o <= $num; $o++) { echo '"container' . $o . '",'; }
        echo ']);';
    }
    ?>
}
window.onload = init;
</script>

2. 佈局儲存邏輯 (bjsave)

function bjsave() {
    var gr = "";
    <?php
    $sql = 'select id from module';
    $result = mssql_query($sql, $conn);
    while ($myrow = mssql_fetch_array($result)) {
        echo 'if (mokuai' . $myrow['id'] . '.parentElement.id != "container0") {' . chr(13);
        echo 'gr = gr + ' . $myrow['id'] . ' + "|" + mokuai' . $myrow['id'] . '.parentElement.id + "$";' . chr(13);
        echo '}' . chr(13);
    }
    ?>
    form1.gr.value = gr;
    form1.submit();
}

此函數遍歷所有模組，若模組不在初始容器 container0，則記錄「模組 ID|目標容器 ID」，以 $ 分隔，最後送隱藏表單提交。

3. 後端儲存 (savegr.php)

<?php
session_start();
if ($_SESSION['gh'] == '') { header('location:login.php'); }
include("config.php");
$sql = 'delete from geren where gh=' . $_SESSION['gh'];
mssql_query($sql);
$gr = str_replace("container", "", $_POST['gr']);
$array = explode("$", $gr);
for ($i = 0; $i <= count($array) - 2; $i++) {
    $add = explode("|", $array[$i]);
    $sql = 'insert into geren (mokuaiid, biaogeid, gh) values ("' . $add[0] . '","' . $add[1] . '","' . $_SESSION['gh'] . '")';
    mssql_query($sql);
}
header("location:view.php");
?>

先清除該使用者舊記錄，再解析前端傳來的字串批次寫入新佈局。