В этой статье описывается метод реализации эффекта перетаскивания уровня сопротивления модуля igoogledivdrag от 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 Div Drag </title>
<стиль типа = "text/css">
*{маржа: 0px; Надо: 0px;}
тело {положение: относительно; Ширина: 780px; Высота: 800px; Граница: 1px твердый красный}
.drag {ширина: 200px; высота: 100px; Граница: 1PX SOLID #000; Маржа: 20px; Фон: #ffff}
.drag h1 {маржа: 0px; Заполнение: 0px; размер шрифта: 12px; Высота: 18px; высота линии: 18px; Фон:#E0E7F3; Текст-интент: 20px; cursor: move;}
.center {маржа: 200px; Граница: 3PX твердый красный}
</style>
<script type = "text/javascript"> </script>
</head>
<тело>
<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, "Start")
Tag = 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)
{
width = obj.offsetwidth+"px";
высота = obj.offsetheight+"px";
border = "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 = "Absolute";
Фильм (obj, parseint (e.clientx) -ex-19, parseint (e.clienty) -ey-20);
tempdiv.parentnode.removechild (tempdiv);
tag = 0;
}
}
}
}
Функциональный фильм (O, L, T) {
var a = 1;
маска = 1;
var ol = parseint (o.offsetleft);
var ot = parseint (o.oftsettop);
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 || E;
if (e.preventdefault) e.preventdefault ();
else e.returnvalue = false;
}
Функция Transp (O, Mode) {
if (mode == "start") {
if (document.all) {
o.style.filter = "alpha (непрозрачность = 50)";
}еще{
O.STYLE.OPACTION = 0,5;
}
}
еще {
if (document.all) {
o.style.filter = "alpha (непрозрачность = 100)";
}еще{
o.style.opacity = 1;
}
}
}
функция GetOffSet (EVT)
{
var target = evt.target;
if (target.offsetleft == не определено)
{
target = target.parentnode;
}
var pagecoord = getPageCoord (Target);
var EventCoord =
{
x: window.pagexoffset + evt.clientx,
y: window.pageyoffset + evt.clienty
};
var offset =
{
Offsetx: EventCoord.x - pagecoord.x,
offsety: eventcoord.y - pagecoord.y
};
вернуть смещение;
}
функция getPageCoord (элемент)
{
var coverd = {x: 0, y: 0};
Пока (элемент)
{
comport.x += element.offsetleft;
координата.y += element.offsettop;
element = element.offsetParent;
}
вернуть координат;
}
Функция getEventOffset (EVT)
{
var msg = "";
if (evt.offsetx == не определен)
{
var evtoffsets = getoffset (evt);
msg = {offsetx: evtoffsets.offsetx, offsety: evtoffsets.offsety};
}
еще
{
msg = {offsetx: evt.offsetx, offsety: evt.offsety};
}
вернуть MSG;
}
Функция fdragstart (xele)
{
Switch (fckbrs ())
{
Случай 3:
window.getSelection (). RemovealLranges ();
перерыв;
по умолчанию:
Xele.setCapture ();
перерыв;
}
}
Функция fdragend (xele)
{
Switch (fckbrs ())
{
Случай 3:
window.getSelection (). RemovealLranges ();
перерыв;
по умолчанию:
Xele.releasecapture ();
перерыв;
}
}
функция fckbrs ()
{
Switch (navigator.appname)
{
Дело 'Opera': return 2;
case 'netscape': return 3;
по умолчанию: возврат 1;
}
}
var element = document.getElementsbytagname ("div");
for (var i = 0; i <element.length; i ++) {
if (element [i] .classname == "Drag") {
перетаскивать (элемент [i])}
}
</script>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.