<html> <head> <title>点击南开网页特效</title> <style> /*debug*/ /* #leftcolumn { background:#f0c0c0; } #centercolumn { background:#c0c0f0; } #rightcolumn { background:#c0f0c0; } */ /* debug over */ /* html { height: 100%; } img { border: none; } body { background: #fff; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } */ * { margin:0;padding:0; } .move { margin:10px; background:#fcfef0; height:80px; border:1px solid #cdcecf; } #container { /*position:relative;*/ text-align:center; /*居中*/ margin:0 auto; background:#f0c0c0; } #header { height:100px; background:#f0f0fc; } #leftcolumn,#centercolumn,#rightcolumn { float:left; /*min-height:400px;*/ margin-right:1%; /*width:32%;*/ } #leftcolumn,#rightcolumn { width:25%; } #centercolumn { width:45%; } .sortHelper { border: 10px dashed #666; width: auto !important; } </style> <script src="./jquery.js" type="text/javascript"></script> <script src="./interface.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(init); function init(){ $("div.move p:first-child").css( /*取得第一段CSS样式*/ { color:"#ff0000", textAlign:"left", cursor:"move", lineHeight:"10px", backgroundColor:"#99FFCC", borderTop:"2px solid #99FFCC", /*拖动边框*/ color:"#000", fontWeight:"bold", fontSize:"12px", height:"20px", position:"relative" } ); /* $("div.move").Draggable({ // handle:$(this).find("p:first-child"), revert:false, //拖拽物 是否回原位置 // ghosting:true, //是否创建一个拖拽运行时复制 zIndex:10, //拖拽时层级 opacity:0.4, //拖拽时透明度 // grid:50, //拖拽间隔 // grid:[20,50], fx:400, //回位置上的时间间隔，毫秒为单位 // containment:"parent", //在某个对象范围内运动 // containment:[0,0,100,100], //[top:0,left:0,width:100,height:100] // axis:"vertically" //只能水平或者垂直移动horizontally snapDistance:50 // autoSize:true, //拖动的时候，影子自动调整大小 // insideParent:false }); */ $('#container > div').Sortable( { /*-------------------移动层----------------------------------------*/ accept : 'move', /*-----------------------------------------------------------------*/ revert:false, ghosting:false, /*-------------------辅助层----------------------------------------*/ helperclass: 'sortHelper', /*-----------------------------------------------------------------*/ // activeclass : 'sortableactive', // hoverclass : 'sortablehover', /*-------------------透明度---------------------------------------*/ opacity: 0.75, /*----------------------------------------------------------------*/ snapDistance:50, /*-----------------------移动手柄---------------------------------*/ handle: 'p', /*----------------------------------------------------------------*/ // autoSize:false, /*是否自己调整属性*/ /*fx: 200,*/ // revert: true, // floats: true, /*--------------------------------------------------------------*/ onStart : function() { $.iAutoscroller.start(this, document.getElementsByTagName('body')); }, onStop : function() { $.iAutoscroller.stop(); }, /*--------------------------------------------------------------*/ /*-------------------------------------------------------------*/ tolerance:'intersect' // tolerance:'pointer' // tolerance:'fit' /*-------------------------------------------------------------*/ } ); /* $("#container > div").Droppable({ accept : 'move', ondrop:function(drag) { $(drag).appendTo($(this)); } // tolerance:"intersect" }); */ } </script> </head> <body> <div id="container"> <div id="header"><p>HEAD</p></div> <div id="leftcolumn"> <div class="move"><p>A</p></div> <div class="move"><p>B</p></div> <div class="move"><p>C</p></div> </div> <div id="centercolumn"> <div class="move"><p>1</p></div> <div class="move"><p>2</p></div> <div class="move"><p>3</p></div> <div class="move"><p>4</p></div> <div class="move"><p>5</p></div> <div class="move"><p>6</p></div> <div class="move"><p>7</p></div> <div class="move"><p>8</p></div> </div> <div id="rightcolumn"> <div class="move"><p>a</p></div> <div class="move"><p>b</p></div> <div class="move"><p>c</p></div> </div> </div> </body> </html> 载入中... 载入中...
Copyright © 2000-2006 Nkcn.Net 天津网站优化 All Rights Reserve.
[
[
[