类似Google个性化主页,实现Web桌面托拽的实例 - 启步网（7ibu.com）网络、IT(挨踢)职业游民学习娱乐之家.

启步网 > 网站建设 > 网站编程

类似Google个性化主页,实现Web桌面托拽的实例

作者： sunhy 阅读：来源：启步网时间：2007-1-28 11:08:21

字体：小中大

在浏览网页的过程经常看到Web桌面托拽的效果，是不是觉得很酷啊？

我第一次登录google的时候，被它的 个性化主页 是深深吸引住了。

你可以：

·添加标签
·添加内容
·并可自定义类别
·自由拖拽

在研究了一段时间后，发现Mark Kahn写了与这相关的实例。Mark Kahn是一个web开发者与DBA.你可以访问他的主页http://www.jslibrary.org 下面是我经过整理，并从中提取了完整的代码，与大家共享：）

请自己动手试试看^_^

Demo - Drag and Drop any item

Item #1

Item #2

Item #3

Item #4

Item #5

Item #6

Item #7

Item #8

Item #9

Item #10

Item #11

Item #12

History

Item5: Mouse Over Fired
Item5: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
Item11: Mouse Over Fired
Item11: Mouse Out Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
Item9: Mouse Over Fired
Item9: Mouse Out Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Down Fired
ListItem2: Mouse Out Fired

Demo - Drag and Drop any item

Item #1
Item #2
Item #3
Item #4
Item #5

Demo - Drag and Drop any item

完整代码如下,可直接运行，或先修改代码再运行：

<SCRIPT 
src="/developer/programme/js/drag_drop.js" 
type=text/javascript></SCRIPT>

LI {
	MARGIN-BOTTOM: 10px
}
OL {
	MARGIN-TOP: 5px
}
.DragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BACKGROUND-COLOR: #eee
}
.DragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
	FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
	BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
	FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}</STYLE>
</P>
<FIELDSET id=Demo0>
<H3>Demo - Drag and Drop any item</H3>
<DIV>
<DIV class=DragContainer id=DragContainer1 DropObj="0" history="History1" 
overclass="OverDragContainer">
<DIV class=DragBox id=Item1 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #1</DIV>
<DIV class=DragBox id=Item2 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #2</DIV>
<DIV class=DragBox id=Item3 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #3</DIV>
<DIV class=DragBox id=Item4 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #4</DIV></DIV>
<DIV class=DragContainer id=DragContainer2 DropObj="0" history="History1" 
overclass="OverDragContainer">
<DIV class=DragBox id=Item5 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox" origClass="DragBox">Item #5</DIV>
<DIV class=DragBox id=Item6 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #6</DIV>
<DIV class=DragBox id=Item7 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #7</DIV>
<DIV class=DragBox id=Item8 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #8</DIV></DIV>
<DIV class=DragContainer id=DragContainer3 DropObj="0" history="History1" 
overclass="OverDragContainer">
<DIV class=DragBox id=Item9 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox">Item #9</DIV>
<DIV class=DragBox id=Item10 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox" origClass="DragBox">Item #10</DIV>
<DIV class=DragBox id=Item11 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox" origClass="DragBox">Item #11</DIV>
<DIV class=DragBox id=Item12 overclass="OverDragBox" DragObj="0" 
dragclass="DragDragBox" origClass="DragBox">Item #12</DIV></DIV>
<FIELDSET><LEGEND>History</LEGEND>
<DIV class=History id=History1>Item5: Mouse Over Fired<BR>Item5: Mouse Out 
Fired<BR>Item10: Mouse Over Fired<BR>Item10: Mouse Out Fired<BR>Item11: Mouse 
Over Fired<BR>Item11: Mouse Out Fired<BR>Item12: Mouse Over Fired<BR>Item12: 
Mouse Out Fired<BR></DIV></FIELDSET> </DIV></FIELDSET> 
<FIELDSET id=Demo7><LEGEND>Demo - Drag and Drop any item</LEGEND>
<DIV>
<OL id=DragContainer7 DropObj="1" history="History1">
<LI id=ListItem1 DragObj="1">Item #1 
<LI id=ListItem2 DragObj="1">Item #2 
<LI id=ListItem3 DragObj="1">Item #3 
<LI id=ListItem4 DragObj="1">Item #4 
<LI id=ListItem5 DragObj="1">Item #5 </LI></OL></DIV></FIELDSET> 
<FIELDSET id=Demo8>
<H3>Demo - Drag and Drop any item</H3>
<DIV id=DragContainer8 DropObj="2" history="History1">
<DIV class=miniDragBox id=MiniBox1 DragObj="2">1</DIV>
<DIV class=miniDragBox id=MiniBox2 DragObj="2">2</DIV>
<DIV class=miniDragBox id=MiniBox3 DragObj="2">3</DIV>
<DIV class=miniDragBox id=MiniBox4 DragObj="2">4</DIV>
<DIV class=miniDragBox id=MiniBox5 DragObj="2">5</DIV>
<DIV class=miniDragBox id=MiniBox6 DragObj="2">6</DIV>
<DIV class=miniDragBox id=MiniBox7 DragObj="2">7</DIV>
<DIV class=miniDragBox id=MiniBox8 DragObj="2">8</DIV>
<DIV class=miniDragBox id=MiniBox9 DragObj="2">9</DIV>
<DIV class=miniDragBox id=MiniBox10 DragObj="2">10</DIV>
<DIV class=miniDragBox id=MiniBox11 DragObj="2">11</DIV>
<DIV class=miniDragBox id=MiniBox12 DragObj="2">12</DIV>
<DIV class=miniDragBox id=MiniBox13 DragObj="2">13</DIV>
<DIV class=miniDragBox id=MiniBox14 DragObj="2">14</DIV>
<DIV class=miniDragBox id=MiniBox15 DragObj="2">15</DIV>
<DIV class=miniDragBox id=MiniBox16 DragObj="2">16</DIV></DIV></FIELDSET> 
</DIV></DIV>
<DIV style="DISPLAY: none; POSITION: absolute"></DIV>

责任编辑：一路狂奔

帐号：
密码：

Google提供的相关资源