JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

复制代码代码如下:

　　<HTML>

　　<HEAD>

　　<TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE>

　　body

　　{

　　margin:10px;

　　}

　　#dragHelper

　　{

　　position:absolute;/*重要*/

　　border:2px dashed #000000;

　　background-color:#FFFFFF;

　　filter: alpha(opacity=30);

　　}

　　.normal

　　{

　　position:absolute;/*重要*/

　　width:300px;

　　#height:10px;

　　border:1px solid #666666;

　　background-color:#FFFFFF;

　　}

　　.over

　　{

　　position:absolute;/*重要*/

　　width:300px;

　　#height:10px;

　　border:1px solid #666666;

　　background-color:#f3f3f3;

　　filter: alpha(opacity=50);

　　}

　　.dragArea {

　　CURSOR: move;

　　}

　　</style>

　　</HEAD>

　　<tbody>

　　<tr><td colspan="3">地址:http://www.baidu.com</td></tr>

　　</tbody>

　　</table>

　　</div>

　　<tbody>

　　</tbody>

　　</table>

　　</div>

　　<tbody>

　　<tr><td colspan="3">地址：http://www.CsrCode.cn</td></tr>

　　</tbody>

　　</table>

　　</div>

　　<tbody>

　　</tbody>

　　</table>

　　</div>

　　</BODY>

<!--

　　var dragObjs = [];//可以拖拽的元素数组

　　var dragObjTops = [];

　　var dragHelper = document.getElementById("dragHelper");//拖拽时位置框

　　var dragObj = null;//拖拽对象元素

　　var dragObjPos = 0;

　　var dragObjOffset = {left:0,top:0};//拖拽对象原始位置

　　var mouseInDragObjOffset = {x:0,y:0};//鼠标在拖拽对象中的相对位置

　　var initHeight = 40;

　　Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

　　function getPosition(e){//获取元素相对文档的绝对位置

　　var left = 0;

　　var top = 0;

　　while (e.offsetParent){

　　left += e.offsetLeft;

　　top += e.offsetTop;

　　e = e.offsetParent;

　　}

　　left += e.offsetLeft;

　　top += e.offsetTop;

　　return {x:left, y:top};

　　}

　　function mouseCoords(ev){//获取鼠标相对文档的绝对位置

　　if(ev.pageX || ev.pageY){

　　return {x:ev.pageX, y:ev.pageY};

　　}

　　return {

　　x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

　　y:ev.clientY + document.body.scrollTop - document.body.clientTop

　　};

　　}

　　function getMouseOffset(target, ev){//获取鼠标相对元素的相对位置

　　ev = ev || window.event;

　　var elementPos = getPosition(target);

　　var mousePos = mouseCoords(ev);

　　return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};

　　}

　　function mouseDown(ev){

　　ev = ev || window.event;

　　target = ev.srcElement || ev.target;

　　if(dragObj){

　　return;

　　}

　　var dragArea = false;

　　if(target.getAttribute("dragArea")){

　　dragArea = true;

　　}

　　while(!target.getAttribute("isDragObj")){

　　if(target.tagName=="HTML")

　　break;

　　target = target.parentNode;

　　}

　　if(dragArea && target.getAttribute("isDragObj")){

　　dragObj = target;

　　//重写的目的是让当前对象在最上层

　　document.body.removeChild(dragObj);

　　document.body.appendChild(dragObj);

　　//记录下拖拽对象原始位置

　　dragObjOffset.left = dragObj.style.left;

　　dragObjOffset.top = dragObj.style.top;

　　dragObj.className = dragObj.getAttribute("overClass");

　　//鼠标在拖拽对象中的相对位置

　　mouseInDragObjOffset = getMouseOffset(dragObj, ev);

　　dragHelper.style.left = dragObj.style.left;

　　dragHelper.style.top = dragObj.style.top;

　　dragHelper.style.width = dragObj.offsetWidth;

　　dragHelper.style.height = dragObj.offsetHeight;

　　dragHelper.style.display = "";

　　//alert(dragObj.offsetWidth+":"+dragObj.clientWidth);

　　}

　　function mouseUp(ev){

　　ev = ev || window.event;

　　target = ev.srcElement || ev.target;

　　if(dragObj){

　　dragObj.style.left = dragHelper.style.left;

　　dragObj.style.top = dragHelper.style.top;

　　dragHelper.style.display = "none";

　　dragObj.className = dragObj.getAttribute("dragClass");

　　dragObj = null;

　　}

　　function mouseMove(ev){

　　ev = ev || window.event;

　　if(dragObj) {

　　var mousePos = mouseCoords(ev);

　　/*dragHelper.style.left = dragObjOffset.left;

　　dragHelper.style.top = dragObjOffset.top;

　　dragHelper.style.width = dragObj.offsetWidth;

　　dragHelper.style.height = dragObj.offsetHeight;

　　dragHelper.style.display = "";*/

　　var windowWidth = document.body.offsetWidth;//窗口宽度

　　var windowHeight = document.body.offsetHeight;//窗口高度

　　//拖拽对象应该所在当前位置

　　var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;

　　var dragObjTop = mousePos.y - mouseInDragObjOffset.y;

　　//增加判断，不然拖拽对象拖出浏览器窗口

　　if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)

　　dragObj.style.left = dragObjLeft;

　　if(dragObjTop >=0)

　　dragObj.style.top = dragObjTop;

　　repaint();

　　}

　　//克隆对象

　　function cloneObject(srcObj, destObj){

　　destObj = srcObj.cloneNode(true);

　　}

　　function makeDraggable(element){

　　element.setAttribute("isDragObj", "y");

　　}

　　function repaint(){

　　for(i=0; i<dragObjs.length; i++){

　　if(dragObjs[i] == dragObj){

　　dragObjPos = i;

　　dragObjs[i] = dragHelper;

　　break;

　　}

　　if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){

　　dragObjs[dragObjPos] = dragObjs[dragObjPos-1];

　　dragObjs[dragObjPos-1] = dragHelper;

　　dragObjPos = dragObjPos - 1;

　　}

　　if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){

　　dragObjs[dragObjPos] = dragObjs[dragObjPos+1];

　　dragObjs[dragObjPos+1] = dragHelper;

　　dragObjPos = dragObjPos + 1;

　　}

　　paintDragObjs();

　　dragObjs[dragObjPos] = dragObj;

　　}

　　function paintDragObjs(){

　　var h = 40;

　　for(i=0; i<dragObjs.length; i++){

　　dragObjs[i].style.left = 20;

　　dragObjs[i].style.top = h;

　　h += dragObjs[i].offsetHeight + 10;

　　}

　　function openClose(obj){

　　obj.innerHTML = obj.innerHTML=="-"?"+":"-";

　　while(obj.tagName != "TBODY"){

　　obj = obj.parentNode;

　　}

　　for(i=0; i<obj.childNodes.length; i++){

　　if(obj.childNodes[i].nodeName == "#text"

　　|| obj.childNodes[i].getAttribute("bar")){ continue; }

　　obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";

　　}

　　paintDragObjs();

　　}

　　document.onmousedown = mouseDown;

　　document.onmouseup = mouseUp;

　　document.onmousemove = mouseMove;

　　window.onload = function(){

　　var objs = document.getElementsByTagName("Div");

　　for(i=0; i<objs.length; i++){

　　var item = objs.item(i);

　　//if(i==1)item.style.height=150;

　　if(item.getAttribute("overClass")){

　　makeDraggable(item);

　　dragObjs.push(item);

　　item.style.left = 20;

　　item.style.top = initHeight;

　　dragObjTops.push(initHeight);

　　initHeight += item.offsetHeight + 10;

　　}

　　// dragHelper = document.createElement('DIV');

　　// dragHelper.style.cssText = 'position:absolute;display:none;';

　　// document.body.appendChild(dragHelper);

　　}

　　//-->

　　</SCRIPT>

　　</HTML>

教程首页更多教程