이 기사에서는 JS를 모방하는 JS의 특수 효과를 드래그하고 삭제하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 Igoogle 사용자 정의 홈페이지 모듈 드래그 앤 드롭 효과를 모방합니다 </title>
<script type = "text/javaScript">
var common = {
getEvent : function () {// ie/ff
if (document.all) {
반환 창 .Event;
}
func = getevent.caller;
while (func! = null) {
var arg0 = func.arguments [0];
if (arg0) {
if ((arg0.constructor == event || arg0.constructor == mouseevent) || (typeof (arg0) == "object"&& arg0.preventDefault && arg0.stopPropagation) {
리턴 arg0;
}
}
func = func.caller;
}
널 리턴;
},
getMousePos : function (ev) {
if (! ev) {
ev = this.getevent ();
}
if (ev.pagex || ev.pagey) {
반품 {
X : EV.Pagex,
Y : ev.pagey
};
}
if (document.documentElement && document.documentElement.scrolltop) {
반품 {
X : ev.clientx + document.documentElement.scrollleft- document.documentElement.clientleft,
y : ev.clienty + document.documentElement.scrolltop- Document.DocumentElement.ClientTop
};
}
else if (document.body) {
반품 {
X : ev.clientx + document.body.scrollleft- document.body.clientleft,
y : ev.clienty + document.body.scrolltop- document.body.clientTop
};
}
},
getElementpos : function (el) {
el = this.getItself (el);
var _x = 0, _y = 0;
하다 {
_X += el.OffSetLeft;
_y += el.offsetTop;
} while (el = el.offsetparent);
반환 {x : _x, y : _y};
},
getItself : function (id) {
"String"== typeof id? document.getElementById (id) : id;
},
getViewPortSize : {W : (Window.InnerWidth)? Window.innerWidth : (Document.DocumentElement && document.documentElement.clientWidth)? document.documentElement.clientWidth : (document.body? docum Window.innerHeight : (Document.DocumentELement && Document.DocumentElement.ClientHeight)? document.documentElement.clientHeight : (document.body? document.body.offsetheight : 0)},
Isie : Document.all? 사실 : 거짓,
setouterhtml : function (obj, html) {
var objrange = document.createrange ();
obj.innerhtml = html;
objrange.selectnodecontents (obj);
var frag = objrange.extractContents ();
obj.parentnode.insertbefore (frag, obj);
obj.parentnode.removechild (OBJ);
},
첫 번째 자식 : 기능 (ParentoBj, Tagname) {
if (common.isie) {
ParentoBJ.FirstChild를 반환합니다.
}
또 다른 {
var arr = parentobj.getElementsByTagName (tagname);
arr arr [0];
}
},
lastchild : function (parentobj, tagname) {
if (common.isie) {
Parentobj.lastChild를 반환합니다.
}
또 다른 {
var arr = parentobj.getElementsByTagName (tagname);
arr arr [arr.length -1];
}
},
setCookie : 함수 (이름, 값) {
document.cookie = name + "=" + value;
},
getCookie : function (name) {
var strcookie = document.cookie;
var arrcookie = strcookie.split ( ";");
for (var i = 0; i <arrcookie.length; i ++) {
var arr = arrcookie [i] .split ( "=");
if (! arr [1]) {
반품 "";
}
if (arr [0] == name) {
반환 ARR [1];
}
}
반품 "";
},
delcookie : function (name) {
var exp = 새로운 날짜 ();
exp.settime (exp.gettime () -1);
var cval = this.getCookie (이름);
if (cval! = null) document.cookie = name + "=" + cval + "; expires =" + exp.togmtstring ();
}
}
var class = {
작성 : function () {
return function () {this.init.apply (this, arguments); }
}
}
var drag = class.create ();
drag.prototype = {
init : function (titlebar, dragdiv, 옵션) {
// 클릭이 투명한 지 여부를 설정하고 기본값은 60% 투명합니다
titlebar = common.getItself (titlebar);
dragdiv = common.getItself (dragdiv);
this.dragarea = {maxleft : -9999, maxright : 9999, maxtop : -9999, Maxbottom : 9999};
if (옵션) {
this.opacity = 옵션. 옵션? (ISNAN (parseint (옵션. opacity))? 100 : parseint (옵션 .opacity)) : 100;
if (Options.area) {
if (Options.area.left &&! isnan (parseint (Options.area.left))) {this.dragarea.maxleft = 옵션.area.left};
if (Options.area.right &&! isnan (parseint (Options.area.right))) {this.dragarea.maxright = 옵션.area.right};
if (Options.area.top &&! isnan (parseint (옵션.area.top))) {this.dragarea.maxtop = 옵션.area.top};
if (Options.area.bottom &&! isnan (parseint (옵션.area.bottom)))) {this.dragarea.maxbottom = 옵션.area.bottom};
}
}
또 다른 {
this.opacity = 60;
}
this.origindragdiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.moveable = false;
this.dragarray = [];
var dragobj = this;
var dragtbl = document.getElementById ( "dragtable");
titlebar.onmousedown = function (e) {
var ev = e || Window.Event || common.getevent ();
// 왼쪽 마우스 버튼을 통해 드래그 앤 드롭 만 드롭 만드립니다. 즉, 왼쪽 마우스 버튼은 1 Firefox입니다.
if (common.isie && ev.button == 1 ||! common.isie && ev.button == 0) {
}
또 다른 {
거짓을 반환합니다.
}
// 특별한 경우 처리 : 상단/하단 이동이 발생하지 않으면 초기 드래그의 상단/하단으로 돌아갑니다.
var tmpcolid;
for (c = 0; c <dragtbl.rows [0] .cells.length; c ++) {
for (k = 0; k <dragtbl.rows [0] .Cells [c] .getElementsByTagName ( "div"). length; k ++) {
if (dragdiv.id == dragtbl.rows [0] .Cells [c] .getElementsByTagName ( "div") [k] .id) {
tmpcolid = C;
부서지다;
}
}
}
var tmpposfirstchild = common.getElementpos (common.firstchild (dragtbl.rows [0] .Cells [tmpcolid], "div"));
var tmpposlastchild = common.getElementpos (common.lastchild (dragtbl.rows [0] .Cells [tmpcolid], "div"));
var tmpobj = {colid : tmpcolid, firstchildup : tmpposfirstchild.y, lastchilddown : tmpposlastchild.y + common.lastchild (dragtbl.rows [0] .cells [tmpcolid], "div").
// 각 컨테이너를 드래그 및 떨어 뜨릴 수있는 현재 위치를 저장
dragobj.dragarray = dragobj.regdragspos ();
// 점선 상자를 삽입합니다
var dashedement = document.createElement ( "div");
dashedElement.style.csstext = dragdiv.style.csstext;
dashedElement.style.border = "Dashed 2px #aaa";
dashedElement.style.marginbottom = "6px";
dashedElement.style.width = dragdiv.offsetwidth -2 * parseint (dashedelement.style.borderwidth) + "px"; // 점선 상자 크기를 Dragdiv와 일치하게 유지하려면 BoderWidth를 빼십시오.
dashedElement.style.height = dragdiv.offsetheight -2 * parseint (dashedelement.style.borderwidth) + "px"; // ff가 올바른지 확인하기 위해 px를 추가하십시오
dashedElement.style.position = "상대";
if (dragdiv.nextsibling) {
dragdiv.parentnode.insertbefore (dashedelement, dragdiv.nextsibling);
}
또 다른 {
dragdiv.parentnode.appendChild (대시);
}
// 드래그 할 때 절대적으로됩니다
dragdiv.style.width = dragdiv.offsetwidth + "px";
dragdiv.style.position = "절대";
dragobj.moveable = true;
dragdiv.style.zindex = dragobj.getzindex () + 1;
var downpos = common.getMousePos (EV);
dragobj.tmpx = downpos.x -dragdiv.offsetleft;
dragobj.tmpy = downpos.y -dragdiv.offsettop;
if (common.isie) {
dragdiv.setcapture ();
} 또 다른 {
window.captureEvents (event.mouseMove);
}
dragobj.setopacity (dragdiv, dragobj.opacity);
// Firefox는 컨테이너에서 사진을 드래그하고 떨어 뜨리는 문제를 제거합니다.
if (ev.preventDefault) {
ev.preventDefault ();
ev.stoppropagation ();
}
document.onmouseMove = function (e) {
if (dragobj.movable) {
var ev = e || Window.Event || common.getevent ();
// 즉, 컨테이너에서 사진을 드래그하고 떨어 뜨리는 문제를 제거합니다.
if (document.all) // 즉
{
ev.returnvalue = false;
}
var movepos = common.getMousePos (EV);
dragdiv.style.left = math.max (math.min (movepos.x- dragobj.tmpx, dragobj.dragarea.maxright), dragobj.dragarea.maxleft) + "px";
dragdiv.style.top = math.max (math.min (movepos.y.y -dragobj.tmpy, dragobj.dragarea.maxbottom), dragobj.dragarea.maxtop) + "px";
var targetdiv = null;
for (var k = 0; k <dragobj.dragarray.length; k ++) {
if (dragdiv == dragobj.dragarray [i]) {
계속하다;
}
if (movepos.x> dragobj.dragarray [k] .posleft && movepos.x <dragobj.dragarray [k] .posleft + dragobj.dragarray [k] .poswidth
&& movepos.y> dragobj.dragarray [k] .postop && movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight
) {
TargetDiv = document.getElementById (dragobj.dragarray [k] .Dragid);
if (movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight / 2) {
// 위로 이동합니다
dashedElement.style.width = targetdiv.offsetWidth -2 * parseint (dashedElement.style.borderwidth) + "px";
TargetDiv.parentNode.insertbefore (대상, TargetDiv);
}
또 다른 {
// 아래로 이동합니다
dashedElement.style.width = targetdiv.offsetWidth -2 * parseint (dashedElement.style.borderwidth) + "px";
if (targetdiv.nextsibling) {
TargetDiv.parentNode.insertbefore (대시, TargetDiv.nextsibling);
}
또 다른 {
TargetDiv.parentNode.appendChild (대시);
}
}
}
}
for (j = 0; j <dragtbl.rows [0] .cells.length; j ++) {
var startleft = common.getElementpos (dragtbl.rows [0] .Cells [j]). x;
if (movepos.x> startleft && movepos.x <startleft + dragtbl.rows [0] .Cells [j] .OffSetWidth) {
/// 열에는 div가 없습니다
if (dragtbl.rows [0] .Cells [j] .getElementsByTagName ( "div"). length == 0) {
dashedElement.style.width = dragtbl.rows [0] .Cells [j] .OffSetWidth -2 * parseInt (dashedElement.style.borderWidth) + "px";
dragtbl.rows [0] .Cells [j] .appendChild (ashedelement);
}
또 다른 {
var posfirstchild = common.getElementpos (common.firstchild (dragtbl.rows [0] .Cells [j], "div"));
var poslastchild = common.getElementpos (common.lastchild (dragtbl.rows [0] .Cells [j], "div"));
// 특별한 경우 처리 : 상단/하단 이동이 발생하지 않으면 초기 드래그의 상단/하단으로 돌아갑니다.
var tmpup, tmpdown;
if (tmpobj.colid == j) {
tmpup = tmpobj.firstchildup;
tmpdown = tmpobj.lastChildDown;
}
또 다른 {
tmpup = posfirstchild.y;
tmpdown = poslastchild.y + common.lastchild (dragtbl.rows [0] .Cells [j], "div"). 오프 스테이트;
}
if (movepos.y <tmpup) {/// 점선 상자를 상단에서 삽입
dashedElement.style.width = common.firstchild (dragtbl.rows [0] .Cells [j], "div"). offsetWidth -2 * parseint (dashedelement.style.borderwidth) + "px";
dragtbl.rows [0] .cells [j] .insertbefore (dashedelement, common.firstchild (dragtbl.rows [0] .Cells [j], "div"));
}
else if (movepos.y> tmpdown) {/// 바닥에서 점선 상자 삽입
dashedElement.style.width = common.lastChild (dragtbl.rows [0] .Cells [j], "div"). offsetWidth -2 * parseint (dashedElement.style.borderwidth) + "px";
dragtbl.rows [0] .Cells [j] .appendChild (ashedelement);
}
}
}
}
}
};
document.onmouseup = function () {
if (dragobj.movable) {
if (common.isie) {
dragdiv.releasecapture ();
}
또 다른 {
Window.ReleaseVents (DragDiv.MousEmove);
}
dragobj.setopacity (dragdiv, 100);
dragobj.moveable = false;
dragobj.tmpx = 0;
dragobj.tmpy = 0;
//이 경우 작성하십시오
dragdiv.style.left = "";
dragdiv.style.top = "";
dragdiv.style.width = "";
dragdiv.style.position = "";
dashedElement.parentNode.insertbefore (dragdiv, dashedement);
dashedElement.parentNode.RemoveChild (대시);
}
};
}
},
setOpacity : 함수 (dragdiv, n) {
if (common.isie) {
dragdiv.filters.alpha.opacity = n;
}
또 다른 {
dragdiv.style.opacity = n / 100;
}
},
getzindex : function () {
var maxzindex = 0;
var divs = document.getElementsByTagName ( "div");
for (z = 0; z <divs.length; z ++) {
maxzindex = math.max (maxzindex, divs [z] .style.zindex);
}
MaxzIndex를 반환합니다.
},
regdragspos : function () {
var arrdragdivs = new Array ();
var dragtbl = document.getElementById ( "dragtable");
var tmpdiv, tmppos;
for (i = 0; i <dragtbl.getElementsByTagName ( "div"). length; i ++) {
tmpdiv = dragtbl.getElementsByTagName ( "div") [i];
if (tmpdiv.classname == "dragdiv") {
tmppos = common.getElementpos (tmpdiv);
arrdragdivs.push ({dragid : tmpdiv.id, posleft : tmppos.x, postop : tmppos.y, poswidth : tmpdiv.offsetwidth, posheight : tmpdiv.offsetheight});
}
}
ARRDRAGDIV를 반환합니다.
}
}
Window.onload = function () {
var dragtbl = document.getElementById ( "dragtable");
if (common.getCookie ( "configarr")) {
var configarr = eval ( "(" + common.getCookie ( "configarr") + ")");
for (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
for (j = 0; j <configarr [i] .length; j ++) {
dragtbl.rows [0] .Cells [i] .appendChild (document.getElementById (configarr [i] [j]));
}
}
}
새로운 드래그 ( "TitleBar1", "dragdiv1");
새로운 드래그 ( "TitleBar2", "dragdiv2");
새로운 드래그 ( "TitleBar3", "dragdiv3");
새로운 드래그 ( "TitleBar4", "dragdiv4");
새로운 드래그 ( "TitleBar5", "dragdiv5");
}
Window.onload = function () {
var dragtbl = document.getElementById ( "dragtable");
var configarr = "";
for (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
var tmpstr = "";
for (j = 0;
tmpstr + = (tmpstr == ""? "": ",", ") +" ' + dragtbl.rows [0] .Cells [i] .getElementsByTagName ( "div") [j] .id + "'";
}
configarr + = (configarr == "?" ":", ") +"[ " + tmpstr +"];
}
// 형식 : [[ 'dragdiv3', 'dragdiv5'], [ 'dragdiv4', 'dragdiv1'], [ 'dragdiv2']]
common.setCookie ( "configarr", "[" + configarr + "]");
}
</스크립트>
<스타일 유형 = "텍스트/CSS">
.spandiv {
위치 : 상대;
너비 : 5px;
높이 : 5px;
}
.Dragdiv, .nodragdiv {
위치 : 상대;
필터 : 알파 (불투명도 = 100);
불투명도 : 1;
마진 바닥 : 6px;
배경색 : #fffff;
}
</스타일>
</head>
<body>
<script type = "text/javaScript">
</스크립트>
<table id = "dragtable"cellpadding = "3"style = "테두리 : solid 0px 녹색; 너비 : 98%;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<table cellPadding = "0"CellPacing = "0">
<tr id = "titlebar1"style = "높이 : 22px; 텍스트-정렬 : 왼쪽; 배경색 :#547bc9; 컬러 : 흰색; 패딩 : 3px; 커서 : 움직임;">
<th align = "left"unselectable = "on"> title1 </th>
</tr>
<tr style = "높이 : 130px; 패딩 : 3px;" align = "left"valign = "top">
<td unselectable = "on"> 여기 캐릭터는 비교적 길다 ... 나는 여기 ... 중국 ... 중국 ... 외국인. 오버플로가 있는지 확인하십시오! </td>
</tr>
</테이블>
</div>
<div id = "dragdiv2">
<table cellPadding = "0"CellPacing = "0">
<tr id = "titlebar2"style = "높이 : 22px; 텍스트-정렬 : 왼쪽; 배경색 :#547bc9; 컬러 : 흰색; 패딩 : 3px; 커서 : 움직임;">
<th align = "left"unselectable = "on"> title2 </th>
</tr>
<tr style = "높이 : 130px; 패딩 : 3px;" align = "left"valign = "top">
<td unselectable = "on"> content2 ... </td>
</tr>
</테이블>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<table cellPadding = "0"CellPacing = "0">
<tr id = "titlebar3"style = "높이 : 22px; 텍스트-정렬 : 왼쪽; 배경색 :#547bc9; 색상 : 흰색; 패딩 : 3px; 커서 : 움직임;">
<th align = "left"unselectable = "on"> title3 </th>
</tr>
<tr style = "높이 : 230px; 패딩 : 3px;" align = "left"valign = "top">
<td unselectable = "on"> content3 ... </td>
</tr>
</테이블>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<table cellPadding = "0"CellPacing = "0">
<tr id = "titlebar4"style = "높이 : 22px; 텍스트-정렬 : 왼쪽; 배경색 :#547bc9; 색상 : 흰색; 패딩 : 3px; 커서 : 움직임;">
<th align = "left"unselectable = "on"> title4 </th>
</tr>
<tr style = "높이 : 130px; 패딩 : 3px;" align = "left"valign = "top">
<td unselectable = "on"> content4 ... </td>
</tr>
</테이블>
</div>
<div id = "dragdiv5">
<table cellPadding = "0"CellPacing = "0">
<tr id = "titlebar5"style = "높이 : 22px; 텍스트-정렬 : 왼쪽; 배경색 :#547bc9; 컬러 : 흰색; 패딩 : 3px; 커서 : 움직임;">
<th align = "left"unselectable = "on"> title5 </th>
</tr>
<tr style = "높이 : 130px; 패딩 : 3px;" align = "left"valign = "top">
<td unselectable = "on"> content5 ... </td>
</tr>
</테이블>
</div>
</td>
</tr>
</테이블>
</body>
</html>
<br> <br> <hr>는 인터넷에서 수집되었으며 상업적 목적이 아닌 관심사와 학습의 교환을 위해서만 수집했습니다. </font> </p>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.