用yui打造自己的拖放式网页

    第一次看到可以在网页中像客户端软件一样拖放是在3721网站上,当时看了半天没有看明白。现在这种技术的应用已经很多了,其中我们感受最深的就是sohu,sina博客的定置布局功能,相比于普通的其他网页,相信大家都能感觉到其优势的存在。

    很多人就会问,这样的网页是用什么技术做的呢?好想学。其实它是用javascript实现的,属于一种javascript的高级应用。要自己编写所有的代码工作量会比较大,我们可以利用成熟的yui(yahoo用户界面库)来做。yui大家可以到yahoo的网站上下载。网址是:http://developer.yahoo.com/yui/

下面是我结合例子做的一个分析:

<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样式,背景等对其进行美化。

 
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值