最近了解了一点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准备好操时就会触发这个事件。到此我们实现了所有功能。
