第一次看到可以在网页中像客户端软件一样拖放是在3721网站上，当时看了半天没有看明白。现在这种技术的应用已经很多了，其中我们感受最深的就是sohu，sina博客的定置布局功能，相比于普通的其他网页，相信大家都能感觉到其优势的存在。
很多人就会问，这样的网页是用什么技术做的呢？好想学。其实它是用javascript实现的，属于一种javascript的高级应用。要自己编写所有的代码工作量会比较大，我们可以利用成熟的yui（yahoo用户界面库）来做。yui大家可以到yahoo的网站上下载。网址是：
[url]http://developer.yahoo.com/yui/[/url]。
下面是我结合例子做的一个分析：
<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/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= 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>
<div id="archives" >个人档案</div>
上面是定义两个层，id分别为blog和archives，分别表示日志和个人档案。
把这段代码放到一个文本文件中，保存成网页格式，就可以看到自己做的拖放的效果了。当然这只是一个简单的例子，在实际的应用中，我们可以给层使用css样式，背景等对其进行美化。
本文转自 牛海彬 51CTO博客，原文链接：http://blog.51cto.com/newhappy/76859，如需转载请自行联系原作者
