仿3721窗口拖动的代码 - 网页制作

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