JS CSS는 기능 구현 code_javascript 기술을 (최소화/드래그/정렬)할 수 있는 DIV 레이어를 생성합니다.

코드 복사 코드는 다음과 같습니다. JS+CSS制作的DIV层最小化和随意拖拽排序功能 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; } 百度 点此拖动 - x 地址:http://www.baidu.com 关键字: 说明: 新浪 ........ - x 地址:http://www.sina.com.cn 关键字: 说明: 网页特效 ........ - x 地址：http://www.CsrCode.cn 关键字: 说明: 七彩影视 ........ - x 地址：http://www.33567.cn 关键字: 说明: var dragObjs = [];//드래그할 수 있는 요소 배열 var dragObjTops = []; var dragHelper = document.getElementById("dragHelper"); // 드래그 시 상자 위치 var dragObj = null; 🎜>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 || 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; //Rewrite 현재 개체를 최상위 수준에 유지하는 것이 목적입니다. document.body.removeChild(dragObj) document.body.appendChild(dragObj); 🎜>//드래그 개체의 원래 위치 기록 dragObjOffset.left = dragObj.style.left; dragObjOffset.top = dragObj.className = dragObj.getAttribute(" overClass"); //드래그 개체 Position mouseInDragObjOffset = getMouseOffset(dragObj, ev); dragHelper.style.left = dragObj.style.left; dragHelper.style.top = dragObj.style.top; dragHelper.style.width = dragObj.offsetWidth; dragHelper.style.height = dragHelper.style.display = ""; //alert(dragObj.offsetWidth ":" dragObj.clientWidth); } } function mouseUp(ev){ ev = ev || target = ev.srcElement || ev.target; if(dragObj){ dragObj.style.left = dragHelper.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 = dragHelper.style.top = dragObjOffset.top; dragHelper.style.width = dragObj.offsetWidth; dragHelper.style.height = dragObj.offsetHeight; / var windowWidth = document.body.offsetWidth;//창 너비 var windowHeight = document.body.offsetHeight;//창 높이 //드래그 개체는 현재 위치에 있어야 합니다 var dragObjLeft = mouseInDragObjOffset.x; var dragObjTop = mousePos.y - mouseInDragObjOffset.y; //판단 추가, 그렇지 않으면 드래그 개체가 브라우저 창 밖으로 드래그됩니다. if( dragObjLeft >= 0 && dragObjLeft 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 if(dragObjs[i] == dragObj){ dragObjPos = i; dragObjs[i] = dragHelper; } } 🎜>if(dragObjPos>0 &&parseInt(dragObj.style.top) dragObjs[dragObjPos] = dragObjs[dragObjPos-1] > dragObjPos 1].style.top)){ dragObjs[dragObjPos] = dragObjs[dragObjPos 1]; dragObjs[dragObjPos 1] = dragHelper; dragObjPos 1 } PaintDragObjs(); dragObjs[dragObjPos] = dragObj; } function PaintDragObj s( ){ var h = 40; i ){ dragObjs[i].style.left = 20; dragObjs[i].style.top = h h = dragObjs[i].offsetHeight 10; >} 함수 openClose(obj){ obj.innerHTML = obj.innerHTML=="-"?" ":"-"; while(obj.tagName != "TBODY"){ obj = obj.parentNode; } for(i=0; i if(obj.childNodes[i].nodeName == "#text" || obj. childNodes[i].getAttribute("bar")){ 계속; } 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 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 = '위치:절대;표시:없음;'; // document.body.appendChild(dragHelper); } //-->

百度	点此拖动	- x
地址:http://www.baidu.com
关键字:
说明:

新浪	........	- x
地址:http://www.sina.com.cn
关键字:
说明:

网页特效	........	- x
地址：http://www.CsrCode.cn
关键字:
说明:

七彩影视	........	- x
地址：http://www.33567.cn
关键字:
说明:

JS CSS는 기능 구현 code_javascript 기술을 (최소화/드래그/정렬)할 수 있는 DIV 레이어를 생성합니다.

관련 기사