이 기사에서는 JS에 의해 IgooGledIvdrag 모듈의 드래그 레이어 드래그 효과를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 igoogle div drag module의 드래그 레이어 효과를 구현합니다 </title>
<스타일 유형 = "텍스트/CSS">
*{마진 : 0px; 패딩 : 0px;}
신체 {위치 : 상대; 너비 : 780px; 높이 : 800px; 국경 : 1px Solid Red}
.Drag {너비 : 200px; 높이 : 100px; 테두리 : 1px 솔리드 #000; 마진 : 20px; 배경 : #ffff}
. 드래그 h1 {마진 : 0px; 패딩 : 0px; 글꼴 크기 : 12px; 높이 : 18px; 라인 높이 : 18px; 배경 :#e0e7f3; 텍스트 안정 : 20px; 커서 : 움직임;}
.Center {마진 : 200px; 국경 : 3px Solid Red}
</스타일>
<script type = "text/javaScript"> </script>
</head>
<body>
<div>
<H1> <strong> www.baidu.com </strong> </h1>
</div>
<div>
<H1> www.163.com </h1>
</div>
<div>
<H1> <strong> www.vevb.com </strong> </h1>
</div>
<div> <h1> 테스트 2 </h1> </div>
<div> <h1> 테스트 3 </h1> </div>
<div> <h1> 테스트 4 </h1> </div>
<div> <h1> 테스트 5 </h1> </div>
</body>
</html>
<script type = "text/javaScript">
/*
저자 : Popper.W
버전 : v2.0
*/
var dragzindexnumber = 0;
함수 드래그 (obj) {
var ox, oy, ex, xy, tag = 0, mask = 0;
if (tag == 0) {
obj.onmousedown = function (e)
{
if (mask == 1) {return; }
obj.style.zindex = DragzindexNumber ++;
transp (obj, "시작")
태그 = 1;
var e = e || window.event;
ex = getEventOffset (e) .OffSetX;
ey = getEventOffset (e) .offsety;
ox = parseint (obj.offsetleft);
Oy = parseint (obj.offsettop);
tempdiv = document.createElement ( "div");
(tempdiv.style)
{
너비 = obj.offsetWidth+"PX";
높이 = obj.offsetheight+"px";
경계 = "1px 점선 빨간색";
위치 = "절대";
왼쪽 = obj.offsetleft+"px";
top = obj.offsettop+"px";
Zindex = 999;
}
document.body.appendchild (tempdiv);
this.ele = tempdiv;
fdragstart (tempdiv);
document.body.onmouseMove = function (e) {
if (tag == 1)
{
var e = e || window.event;
tempdiv.style.left = parseint (e.clientx) -ex+"px";
tempdiv.style.top = parseint (e.clienty) -ey+"px";
}
else {if (! tempdiv == null) tempdiv.parentnode.removechild (tempdiv)}
}
tempdiv.onmouseup = function (e)
{
var e = e || window.event;
fdragend (tempdiv);
obj.style.position = "절대";
영화 (obj, parseint (e.clientx) -ex-19, parseint (e.clienty) -ey-20);
tempdiv.parentnode.removechild (tempdiv);
태그 = 0;
}
}
}
}
기능 영화 (O, L, T) {
var a = 1;
마스크 = 1;
var ol = parseint (O.OffSetLeft);
var ot = parseint (O.offsettop);
var itimer = setInterval (function () {
if (a == 10)
{
transp (o, "end");
마스크 = 0;
ClearInterval (Itimer);
}
o.style.left = ol+a*(l-ol)/10+"px";
o.style.top = ot+a*(t-ot)/10+"px";
A ++;
}, 20);
}
기능 fcanclebubble (e)
{
var e = Window.event || 이자형;
if (e.preventDefault) e.preventDefault ();
else e.returnvalue = false;
}
함수 transp (o, mode) {
if (mode == "start") {
if (document.all) {
o.style.filter = "알파 (불투명도 = 50)";
}또 다른{
O.style.opacity = 0.5;
}
}
또 다른 {
if (document.all) {
o.style.filter = "알파 (불투명도 = 100)";
}또 다른{
o.style.opacity = 1;
}
}
}
기능 getoffset (EVT)
{
var target = evt.target;
if (target.offsetleft == undefined)
{
대상 = target.parentNode;
}
var pagecoord = getPageCoord (대상);
var eventCoord =
{
x : window.pagexoffset + evt.clientx,
Y : Window.PageyOffSet + EVT.Clienty
};
var 오프셋 =
{
OffsetX : EventCoord.x -PageCoord.x,
오프셋 : EventCoord.y -PageCoord.y
};
오프셋 리턴;
}
함수 getPageCoord (요소)
{
var coord = {x : 0, y : 0};
while (요소)
{
coord.x += element.offSetLeft;
coordinate.y += element.offsetTop;
요소 = 요소 .offsetparent;
}
리턴 코디;
}
함수 getEventOffset (EVT)
{
var msg = "";
if (evt.offsetx == undefined)
{
var evtoffsets = getoffset (evt);
msg = {offsetx : evtoffsets.offsetx, offsety : evtoffsets.offsety};
}
또 다른
{
msg = {offsetx : evt.offsetx, offsety : evt.offsety};
}
반환 메시지;
}
함수 fdragstart (xele)
{
스위치 (fckbrs ())
{
사례 3 :
window.getSelection (). removeallRanges ();
부서지다;
기본:
xele.setcapture ();
부서지다;
}
}
기능 fdragend (xele)
{
스위치 (fckbrs ())
{
사례 3 :
window.getSelection (). removeallRanges ();
부서지다;
기본:
xele.releasecapture ();
부서지다;
}
}
함수 fckbrs ()
{
스위치 (Navigator.AppName)
{
사례 '오페라': 반환 2;
케이스 'Netscape': 반환 3;
기본값 : 반환 1;
}
}
var element = document.getElementsByTagName ( "div");
for (var i = 0; i <element.length; i ++) {
if (요소 [i] .className == "drag") {
드래그 (요소 [i])}
}
</스크립트>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.