用yui打造自己的拖放式網頁

    第一次看到可以在網頁中像用戶端軟體一樣拖放是在3721網站上，當時看了半天沒有看明白。現在這種技術的應用已經很多了，其中我們感受最深的就是sohu，sina部落格的定置布局功能，相比于普通的其他網頁，相信大家都能感覺到其優勢的存在。

    很多人就會問，這樣的網頁是用什麼技術做的呢？好想學。其實它是用javascript實作的，屬于一種javascript的進階應用。要自己編寫所有的代碼工作量會比較大，我們可以利用成熟的yui（yahoo使用者界面庫）來做。yui大家可以到yahoo的網站上下載下傳。網址是：[url]http://developer.yahoo.com/yui/[/url]。

下面是我結合例子做的一個分析：

<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>

<script type="text/javascript" src="../../build/event/event-min.js" ></script>

<script type="text/javascript" src="../../build/dom/dom-min.js"></script>

<script type="text/javascript" src="../../build/logger/logger-min.js"></script>

<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>

//上面5條語句是包含的yui腳本，所有的腳本隻要包含了這幾個語句就可以實作拖放功能了，路徑用的是相對路徑，可以根據自己編寫的腳本與yui函數庫的存放位置來修改。

<script type="text/javascript">

NewhappyApp= function() {

    var dd, dd2;

    return {

        init: function() {

            dd = new YAHOO.util.DD("blog");

            dd2 = new YAHOO.util.DD("archives");

        }

    }

}();

YAHOO.util.Event.onDOMReady(NewhappyApp.init);

</script>

//上面這段腳本是最主要的腳本，定義一個主要對象NewhappyApp,在函數中再根據需要操作的層數定義兩個變量，在init函數中，對這兩個變量進行初始化，調用的初始函數為YAHOO.util.DD，是yui提供的一個拖放對象，參數為層的id，這裡我們使用blog和archives。

<div id="blog" >日志</div>

<div id="archives" >個人檔案</div>

上面是定義兩個層，id分别為blog和archives，分别表示日志和個人檔案。

 把這段代碼放到一個文本檔案中，儲存成網頁格式，就可以看到自己做的拖放的效果了。當然這隻是一個簡單的例子，在實際的應用中，我們可以給層使用css樣式，背景等對其進行美化。