Javascript_javascript 기술로 구현된 Google과 같은 Div 드래그 효과 코드
- WBOY원래의
- 2016-05-16 18:03:331033검색
코드 복사 코드는 다음과 같습니다.
JScript 파일:
//MSIE Firefox 확인
var ie=false,moz=false;
(function()
{//브라우저 확인
var userAgent=navigator.userAgent;
if(userAgent.indexOf("MSIE")!=-1)
ie=true;
else if(userAgent.indexOf("Firefox")!=-1 )
moz=true;
})();
//ID로 객체 가져오기
function $E_ID(idString)
{
return document.getElementById(idString);
}
//이름으로 개체 가져오기
function $Es_Tag(tagName)
{
return document.getElementsByTagName(tagName)
}
//절대값 가져오기 객체의 위치 obj .offsetparent
function $GetInfo(o)
{
var to=new Object()
to.left=to.right=to.top=to.bottom= 0;
var twidth=o.offsetWidth;
while(o)
{
to.left =o.offsetLeft; =o.offsetTop;
o=o.offsetParent;
to.right=to.left twidth;
to.bottom=to.top theight; >}
//객체를 마우스로 클릭하면 이벤트가 확인됩니다.
function $hitTest(obj,event)
{
obj=$GetInfo(obj)
var x= event.clientX;
var y= event.clientY;
if((x>=obj.left&&x<=obj.right)&&(y>=obj.top&&y<=obj.bottom))
return true;
else
return false;
}
function Drag(event)
{
this.dragged=false; this.tdiv=null;
this .fixLeft=0;
this.lastX=event.clientX;
드래그 .mm=null;
this.dragStart=function(event)
{
this.ao=ie?event.srcElement:(moz?event.target:null)
if(ie)
document.body.onselectstart=function ()
{
return false
}
if(moz&&this.ao.nodeType==3)
this.ao=this.ao. parentNode
if(this.ao .tagName=="TD"||this.ao.tagName=="TR")
this.ao=this.ao.offsetParent.parentNode
else
return;
if(this .ao.className!="dragdiv")
return
this.tdiv=$E_ID("tmpdiv")
this.tdiv.style.visibility ="visible";
this.tdiv.style.filter="alpha(opacity=70)";
if(ie)
this.tdiv.filters.alpha.opacity=70; this.tdiv.style.opacity=0.7;
this.tdiv.style.zIndex=100;
this.tdiv.innerHTML=this.ao.innerHTML
this.tdiv.style.width=this .ao.offsetWidth "px";
this.tdiv.style.height=this.ao.offsetHeight "px"
this.tdiv.style.top=$GetInfo(this.ao).top "px ";
this.tdiv.style .left=$GetInfo(this.ao).left "px";
this.fixTop=parseInt($GetInfo(this.tdiv).top);
this .fixLeft=parseInt($GetInfo(this.tdiv).left);
this.dragged=true;
}
this.onDrag=function(event)
{
if(( !this.dragged)||this.ao ==null)return;
var tX=event.clientX;
var tY=event.clientY
this.tdiv.style.left=parseInt(this .fixLeft tX-this.lastX-document.body.scrollLeft) "px";
this.tdiv.style.top=parseInt(this.fixTop tY-this.lastY-document.body.scrollTop) "px";
for(var m=0; m<$E_ID("root").rows.length;m )
{
var rootCells=$E_ID("root").rows[m].cells ;
for(var i=0 ;i
if($hitTest(rootCells[i],event))
{
if(rootCells[ i].hasChildNodes())
{
for(var j=0;j
if($hitTest(rootCells[i] .childNodes[j],event))
{
rootCells[i].insertBefore(this.ao,rootCells[i].childNodes[j])
break
}
}
if(j==rootCells [i].childNodes.length)
{
rootCells[i].appendChild(this.ao);break
}
break; >}
else
{
rootCells[i].appendChild(this.ao)
break
}
}
}
}
}
this.dragEnd=function()
{
if(this.dragged)
{
this.dragged=false
Drag.mm=this.repos(150,15 ,this);
this.ao =null;
}
if(ie)document.body.onselectstart=function(){return true}
}
this.repos=function( aa,ab,obj)
{
if(ie)var f=obj.tdiv.filters.alpha.opacity
else if(moz)var f=obj.tdiv.style.opacity*100 ;
var kf=f/ab ;
var tl=parseInt($GetInfo(obj.tdiv).left)
var tt=parseInt($GetInfo(obj.tdiv).top); 🎜>var kl=(tl-$GetInfo (obj.ao).left)/ab;
var kt=(tt-$GetInfo(obj.ao).top)/ab
return setInterval(function) (){
if(ab< 1)
{
clearInterval(Drag.mm)
obj.tdiv.style.visibility="hidden"
obj.tdiv.style. zIndex="";
반환;
tl-=kl;
f-=kf; tdiv.style.left=parseInt(tl) "px";
obj.tdiv.style.top=parseInt(tt) "px"
if(ie)obj.tdiv.filters.alpha.opacity= f;
else if(moz) obj.tdiv.style.opacity=f/100;
},aa/ab )
}
}
var tDrag=null; >function init(event)
{
// Alert(event.target.innerHTML);
tDrag=new Drag(event);
tDrag.dragStart(event)
} 🎜>function move(event)
{
if(tDrag!=null)tDrag.onDrag(event)
}
function end()
{
if(tDrag! =null){
tDrag.dragEnd()
tDrag=null
}
}
Asp.net文件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
| <테이블 스타일="높이:100%;너비:100%" 테두리 ="0"> | DIV1 点击即可开始拖动! |
|