实现Web桌面托拽的实例

王朝other·作者佚名 2007-01-07

宽屏版字体: 小|中|大|超大

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 {

}

.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 {

}

.DragDragBox {

}

.miniDragBox {

}

.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

}

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

Demo - Drag and Drop any item

Item #1

Item #2

Item #3

Item #4

Item #5

Demo - Drag and Drop any item