Để đáp ứng yêu cầu của khách hàng về việc có thể tùy chỉnh tự do các module trên trang chủ, tôi đã chọn sử dụng plugin để hỗ trợ chức năng kéo thả. Dưới đây là cách thực hiện:

JS cần được thêm vào

<script src="jquery-1.2.4a.js"></script>
<script src="ui.base.min.js"></script>
<script src="ui.droppable.min.js"></script>
<script src="ui.draggable.min.js"></script>
<script src="ui.sortable.min.js"></script>
<script src="main.js"></script>

Phần HTML:

<div id="container">
    <div id="header" class="sortable">
        <h2>Tiêu đề chính</h2>
        <dl class="sort">
            <dt>Tin tức chính</dt>
            <dd>Chữ mô tả 1</dd>
            <dd>Chữ mô tả 2</dd>
        </dl>
    </div>
    <div id="content" class="sortable">
        <h2>Nội dung chi tiết</h2>
        <dl class="sort">
            <dt>Tiêu đề nội dung</dt>
            <dd>Mô tả nội dung 1</dd>
            <dd>Mô tả nội dung 2</dd>
        </dl>
    </div>
    <div id="sidebar" class="sortable">
        <h2>Tin tức cuộn</h2>
        <dl class="sort">
            <dt>Tiêu đề tin 1</dt>
            <dt>Tiêu đề tin 2</dt>
            <dt>Tiêu đề tin 3</dt>
        </dl>
        <dl class="sort">
            <dt>Tiêu đề tin 4</dt>
            <dd>Nội dung 1</dd>
            <dd>Nội dung 2</dd>
        </dl>
        <dl class="sort">
            <dt>Tiêu đề tin 5</dt>
            <dt>Tiêu đề tin 6</dt>
            <dt>Tiêu đề tin 7</dt>
        </dl>
    </div>
    <div class="clear"></div>
    <div id="footer" class="sortable">
        <h2>Phần chân trang</h2>
        <dl class="sort">
            <dt>Thông tin bản quyền</dt>
            <dd>Bản quyền: Zeng Shun, EE, Đại học Tsinghua</dd>
        </dl>
    </div>
</div>
<div id="trashcan" class="sortable">
    <h2>Thùng rác</h2>
</div>

Phần JS:

$(function(){
    var moveUp = function(){
        // Di chuyển mục lên
        var link = $(this),
            dl = link.parents("dl"),
            prev = dl.prev("dl");	
        if(link.is(".up") && prev.length > 0)
            dl.insertBefore(prev);
    };

    var addItem = function(){
        // Thêm một mục mới
        var sortable = $(this).parents(".sortable");
        var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';
        var html = '<dl class="sort"><dt>Tên động' + options + '</dt><dd>Mô tả</dd></dl>';
        sortable.append(html).sortable("refresh").find("a.up").bind("click", moveUp);
    };

    var emptyTrashCan = function(item){
        // Xóa mục khỏi thùng rác
        item.remove();
    };

    var sortableChange = function(e, ui){
        // Kéo và thả mục
        if(ui.sender){
            var w = ui.element.width();
            ui.placeholder.width(w);
            ui.helper.css("width",ui.element.children().width());
        }
    };

    var sortableUpdate = function(e, ui){
        // Cập nhật khi thay đổi (ví dụ: xóa từ thùng rác)
        if(ui.element[0].id == "trashcan"){
            emptyTrashCan(ui.item);
        }
    };

    $(function(){
        // Áp dụng cho tất cả các phần trong trang
        var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
        var $els = $(els.join(','));

        // Thêm nút "thêm mục" và "di chuyển lên"
        $("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');
        $("dt", $els).append('<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>');

        // Gắn sự kiện
        $("a.add").bind("click", addItem);
        $("a.up").bind("click", moveUp);

        // Sử dụng jQuery UI Sortable
        $els.sortable({
            items: '> dl',	// Đối tượng cần kéo
            handle: 'dt',	// Phần kích hoạt sự kiện
            cursor: 'move',	// Kiểu con trỏ
            opacity: 0.8,	// Độ mờ khi kéo
            appendTo: 'body',
            connectWith: els,
            start: function(e,ui) {
                ui.helper.css("width", ui.item.width());
            },
            change: sortableChange,
            update: sortableUpdate	// Xử lý thùng rác
        });
    });
});