最近了解了一點YUI的控件知識.先做個Ajax拖放頁面元素(圖片)以便學習參考.
現在有一些網站如QQ空間,都允許用戶自定義模塊,可以任意拖動模塊到各個地方去.YUI在這一方面做得比較好.下面以一組圖片的方式來說明如何運用Ajax拖放頁面元素:
第一步:在<head></head>標簽中加入YUI文件的三個鏈接:yahoo-dom-event.js\ainmation.js\dragdrop.js
然后是我們自己的腳本：ddlist.js還有我直接寫在html文檔里面的javascript代碼：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>任意拖放圖片到某一個區位</title> <script src="js/yahoo-dom-event.js"></script> <script src="js/animation.js"></script> <script src="js/dragdrop.js"></script> <script src="js/ddlist.js"></script> <style type="text/css"> li{ list-style:none;float:left;margin:0 16px 16px 0;} .sortList{ width:202px;} ul{width:800px;} </style> </head>
?
<body> <div class="SlideShow"><ul id="ul1" class="dropList"><li id="li0" class="sortList"><img src="images/img01.jpg" width="200" height="150"/></li><li id="li1" class="sortList"><img src="images/img02.jpg" width="200" height="150"/></li><li id="li2" class="sortList"><img src="images/img03.jpg" width="200" height="150"/></li><li id="li3" class="sortList"><img src="images/img04.jpg" width="200" height="150"/></li><li id="li4" class="sortList"><img src="images/img05.jpg" width="200" height="150"/></li></ul> </div> </body>
?在上面的body中要注意寫好各個調用的ID。。如id="ul1"
?
第二步：實現Ajax拖放頁面元素
<script type="text/javascript">var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;var DDM = YAHOO.util.DragDropMgr;YAHOO.DDApp = {init: function(){new YAHOO.util.DDTarget("ul1");for(var i=0;i<7;i++){new YAHOO.DDList("li"+i); }} };Event.onDOMReady(YAHOO.DDApp.init,YAHOO.DDApp,true); </script>
首先是初始化三個變量。你會注意到,所有函數和變量名都以YAHOO開頭：
?其次在加載頁面時，我們需要告訴YUI和瀏覽器我們需要拖動哪些元素。在這里我們要拖動<ul>和其中所有的<li>。。所以把前者設置為一個DDTarget,后者設置為DDList所有實例。
Event.onDOMReady(YAHOO.DDApp.init,YAHOO.DDApp,true);
這個是Event.onDOMReady是一個定制YUI事件。當DOM準備好操時就會觸發這個事件。到此我們實現了所有功能。
?
