YUI实现可拖放页面

来源:互联网 发布:淘宝网找不到gta5 编辑:程序博客网 时间:2024/05/01 05:03

            今天在一个博课上看见一篇教怎样“用yui打造自己的拖放式网页”的文章,故做出整个程式来玩玩。

             感觉以后能用上,写在此怕忘了,呵呵。

<html>
<head>
<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>


<script type="text/javascript">
NewhappyApp
= function() {
    
var dd, dd2,dd3;
    
return {
        init: 
function() {
            dd 
= new YAHOO.util.DD("blog");
            dd2 
= new YAHOO.util.DD("archives");
            dd3 
= new YAHOO.util.DD("friends");
        }

    }

}
();
    
YAHOO.util.Event.onDOMReady(NewhappyApp.init);
</script>

<style type="text/css">
#leftbar
{
        float
:left; 
    width
:20%;
}

#blog,#archives,#friends
{
    border
:1px solid #cccccc;
    padding
:4px;
    margin
:2px 0 5px 0;
}



</style>
</head>
<body>
<div id="leftbar">
<div id="blog" >日志
<div>
*sku
<br/>
*lixi
</div>
</div>

<div id="archives" >个人档案
<div>
*sku
<br/>
*lixi
</div>
</div>

<div id="friends" >好朋友
<div>
*sku
<br/>
*lixi
</div>
</div>

</div>
</body>


</html>