JS CSS は関数実装 (最小化/ドラッグ/ソート) ができる DIV レイヤーを作成します code_javascript スキル

コードをコピー コードは次のとおりです: 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 关键字: 说明: varragObjs = [];//ドラッグできる要素の配列 varragObjTops = []; varragHelper = document.getElementById("dragHelper"); // ドラッグ時のボックスの位置 varragObj = null; 🎜>varragObjOffset = {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; while (e.offsetParent){ left = e.offsetLeft; top = e.offsetTop; e = e .offsetParent; left = e.offsetLeft; 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.y - elementPos.y} 関数mouseDown(ev){ ev = ev || if(dragObj){ varragArea = 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 =ragObj.style.left; dragObj.className =ragObj.getAttribute; overClass"); //ドラッグ オブジェクト内のマウスの相対位置 Position mouseInDragObjOffset = getMouseOffset(dragObj, ev); dragHelper.style.left =ragObj.style.left; ドラッグヘルパー.スタイルトップ = ドラッグObj.スタイル.トップ; ドラッグヘルパー.スタイル.幅 = ドラッグObj.offsetWidth; ドラッグヘルパー.スタイル.ディスプレイ高さ = ""; //alert(dragObj.offsetWidth ":"ragObj.clientWidth); } } function MouseUp(ev){ ev = ev || ターゲット = ev.srcElement || ev.target; if(dragObj){ dragObj.style.left =ragHelper.style.top; 🎜>dragHelper.style.display = "none"; dragObj.className =ragObj.getAttribute("dragClass"); dragObj = } } 関数 MouseMove(ev) ){ ev = ev || if(dragObj) { /*dragHelper.style.left =ragObjOffset.left; >dragHelper.style.top = ドラッグObjOffset.top; dragHelper.style.width = ドラッグObj.offsetWidth; dragHelper.style.height = ドラッグObj.offsetHeight = "";* / var windowWidth = document.body.offsetWidth;// ウィンドウの幅 var windowHeight = document.body.offsetHeight;// ウィンドウの高さ // ドラッグ オブジェクトは現在の位置にある必要があります varragObjLeft =mousePos.x -mouseInDragObjOffset.x; varragObjTop =mousePos.y -mouseInDragObjOffset.y; //判定を追加します。そうでない場合、ドラッグ オブジェクトはブラウザ ウィンドウの外にドラッグされます。 if( ragObjLeft >= 0 &&ragObjLeft dragObj.style .left =ragObjLeft; if(dragObjTop >=0) dragObj.style.top =ragObjTop ; 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] == ドラッグObj){ dragObjPos = i; } } if(dragObjPos>0 && parseInt(dragObj.style.top) dragObjs[dragObjPos] =ragObjs[dragObjPos-1]; >dragObjs[dragObjPos-1] =ragHelper; dragObjPos =ragObjPos - 1; } if(dragObjPos parseInt(dragObjs[ドラッグObjPos 1].style.top)){ dragObjs[dragObjPos] = ドラッグObjs[dragObjPos 1]; dragObjPos = ドラッグObjPos 1;ペイントDragObjs(); dragObjs[dragObjPos] = ドラッグObj; } 関数paintDragObj s(){ var h = 40; i dragObjs[i].style.left = 20; dragObjs[i].style.top = h; h =ragObjs[i].offsetHeight 10; >} function 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 = マウスダウン; document.onmouseup = マウスアップ; document.onmousemove = マウス移動; 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; } } //ragHelper = document.createElement('DIV'); //ragHelper.style.cssText = 'position:absolute;display:none;'; // 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 は関数実装 (最小化/ドラッグ/ソート) ができる DIV レイヤーを作成します code_javascript スキル

関連記事