YUI实现可拖放页面

原创 2007年09月25日 21:35:00

            今天在一个博课上看见一篇教怎样“用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>

相关文章推荐

JDeveloper初步:ADF Faces页面拖放

概要:本教程,演示了如何将ADF Faces components定义为drag和drop targets,并实现事件监听。创建Managed bean MyPageInfo并且实现handleIte...

拖放事件原理及实现详解

  • 2016年07月18日 19:21
  • 15KB
  • 下载

说说如何使用 HTML5 实现拖放功能(使用原生 API)

拖放指的是在框架间、窗口间或者应用间拖放网页元素。1 拖放事件拖放事件分为两种:被拖动的元素上触发的事件以及放置目标上触发的事件。拖动某元素时,将依次触发以下事件: dragstart drag dr...

用鼠标实现文件拖放.rar

  • 2010年07月01日 13:39
  • 36KB
  • 下载

VB 5.0中实现鼠标拖放...

  • 2009年10月08日 01:55
  • 2KB
  • 下载

练习笔记:使用jQuery实现H5拖放(drag 和 drop)功能

遇到问题1: 在js里面可直接e.dataTransfer.setData("obj_add",e.target.id); 使用jQuery绑定事件时,需e.originalEvent.dataTr...
  • leiliz
  • leiliz
  • 2017年02月08日 14:46
  • 2780

js 实现div拖放

  • 2008年03月20日 08:46
  • 12KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:YUI实现可拖放页面
举报原因:
原因补充:

(最多只允许输入30个字)