类似Google个性化主页,实现Web桌面托拽的实例-乐府诗个人博客

--2007-6-17 22:57:29

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

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

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

你可以：

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

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

请自己动手试试看^_^

Demo - Drag and Drop any item

Item #6

Item #1

Item #2

Item #3

Item #4

Item #5

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
Item9: Mouse Over Fired
Item9: Mouse Out Fired
Item5: Mouse Over Fired
Item5: Mouse Out Fired
Item6: Mouse Over Fired
Item6: Mouse Out Fired
Item7: Mouse Over Fired
Item7: Mouse Out Fired
Item8: Mouse Over Fired
Item8: Mouse Out Fired
Item4: Mouse Over Fired
Item4: Mouse Out Fired
Item3: Mouse Over Fired
Item3: Mouse Out Fired
Item2: Mouse Over Fired
Item2: Mouse Out Fired
Item1: Mouse Over Fired
Item1: Mouse Out Fired
Item5: Mouse Over Fired
Item5: Mouse Out Fired
Item6: Mouse Over Fired
Item6: Mouse Out Fired
Item7: Mouse Over Fired
Item7: Mouse Out Fired
Item8: Mouse Over Fired
Item8: Mouse Out Fired
Item8: Mouse Over Fired
Item8: Mouse Out Fired
Item7: Mouse Over Fired
Item7: Mouse Out Fired
Item11: Mouse Over Fired
Item11: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
Item9: Mouse Over Fired
Item9: Mouse Out Fired
Item5: Mouse Over Fired
Item5: Mouse Out Fired
Item1: Mouse Over Fired
Item1: Mouse Out Fired
Item2: Mouse Over Fired
Item2: Mouse Out Fired
Item3: Mouse Over Fired
Item3: Mouse Out Fired
Item2: Mouse Over Fired
Item2: Mouse Down Fired
Item2: Start Dragging
Item2: Made Visible
Item2: Mouse Out Fired
Item6: Mouse Over Fired
Item2: Moved into DragContainer2
Item2: Inserted Before Item6
Item6: Mouse Out Fired
Item2: Inserted Before Item7
Item2: Inserted Before Item8
Item2: Hidden
Item2: Mouse Up Fired
Item4: Mouse Over Fired
Item4: Mouse Out Fired
Item8: Mouse Over Fired
Item8: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
Item7: Mouse Over Fired
Item7: Mouse Out Fired
Item6: Mouse Over Fired
Item6: Mouse Out Fired
Item5: Mouse Over Fired
Item5: Mouse Out Fired
Item6: Mouse Over Fired
Item6: Mouse Down Fired
Item6: Start Dragging
Item6: Made Visible
Item6: Mouse Out Fired
Item6: Moved into DragContainer1
Item6: Inserted at end of DragContainer1
Item6: Inserted Before Item2
Item6: Inserted Before Item1
Item6: Mouse Up Fired
Item6: Mouse Over Fired
Item6: Mouse Out Fired
Item1: Mouse Over Fired
Item1: Mouse Out Fired
Item2: Mouse Over Fired
Item2: Mouse Down Fired
Item2: Start Dragging
Item2: Made Visible
Item2: Mouse Out Fired
Item2: Hidden
Item2: Mouse Up Fired
Item3: Mouse Over Fired
Item3: Mouse Down Fired
Item3: Start Dragging
Item3: Made Visible
Item3: Mouse Out Fired
Item3: Hidden
Item3: Mouse Up Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
Item11: Mouse Over Fired
Item11: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
MiniBox4: Mouse Over Fired
MiniBox4: Mouse Out Fired
MiniBox3: Mouse Over Fired
MiniBox3: Mouse Out Fired
MiniBox4: Mouse Over Fired
MiniBox4: Mouse Down Fired
MiniBox4: Mouse Out Fired
MiniBox8: Mouse Over Fired
MiniBox8: Mouse Out Fired
MiniBox11: Mouse Over Fired
MiniBox11: Mouse Out Fired
MiniBox12: Mouse Over Fired
MiniBox12: Mouse Down Fired
MiniBox12: Start Dragging
MiniBox12: Made Visible
MiniBox12: Mouse Out Fired
MiniBox12: Hidden
MiniBox12: Mouse Up Fired
MiniBox15: Mouse Over Fired
MiniBox15: Mouse Down Fired
MiniBox15: Start Dragging
MiniBox15: Made Visible
MiniBox15: Mouse Out Fired
MiniBox11: Mouse Over Fired
MiniBox11: Mouse Out Fired
MiniBox15: Inserted Before MiniBox11
MiniBox15: Mouse Up Fired
MiniBox7: Mouse Over Fired
MiniBox7: Mouse Out Fired
MiniBox7: Mouse Over Fired
MiniBox7: Mouse Down Fired
MiniBox7: Start Dragging
MiniBox7: Made Visible
MiniBox7: Mouse Out Fired
MiniBox7: Inserted Before MiniBox3
MiniBox7: Mouse Up Fired
MiniBox7: Mouse Over Fired
MiniBox7: Mouse Out Fired
MiniBox8: Mouse Over Fired
MiniBox8: Mouse Out Fired
MiniBox15: Mouse Over Fired
MiniBox15: Mouse Out Fired
MiniBox14: Mouse Over Fired
MiniBox14: Mouse Out Fired
MiniBox16: Mouse Over Fired
MiniBox16: 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
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
Item11: Mouse Over Fired
Item11: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
Item9: Mouse Over Fired
Item9: Mouse Out Fired
Item11: Mouse Over Fired
Item11: 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 Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
MiniBox8: Mouse Over Fired
MiniBox8: Mouse Out Fired
MiniBox11: Mouse Over Fired
MiniBox11: Mouse Out Fired
MiniBox16: Mouse Over Fired
MiniBox16: Mouse Out Fired
ListItem5: Mouse Over Fired
ListItem5: Mouse Out Fired
Item9: Mouse Over Fired
Item9: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: 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
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
Item8: Mouse Over Fired
Item8: Mouse Out Fired
Item7: Mouse Over Fired
Item7: Mouse Out Fired
Item5: Mouse Over Fired
Item5: Mouse Down Fired
Item5: Start Dragging
Item5: Made Visible
Item5: Mouse Out Fired
Item7: Mouse Over Fired
Item5: Inserted Before Item8
Item7: Mouse Out Fired
Item8: Mouse Over Fired
Item5: Hidden
Item8: Mouse Out Fired
Item5: Mouse Up Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem4: Mouse Over Fired
ListItem4: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem3: Mouse Over Fired
ListItem3: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem1: Mouse Over Fired
ListItem1: Mouse Out Fired
ListItem2: Mouse Over Fired
ListItem2: Mouse Out Fired
Item2: Mouse Over Fired
Item2: Mouse Out Fired
Item9: Mouse Over Fired
Item9: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
Item12: Mouse Over Fired
Item12: Mouse Out Fired
Item10: Mouse Over Fired
Item10: Mouse Out Fired
Item9: Mouse Over Fired
Item9: 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>
<STYLE type=text/css>
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>

乐府诗个人博客