复制代码代码如下 :
<! 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> </title>
<스타일 유형 = "텍스트/CSS">
div, h2, p {마진 : 0; 패딩 : 0;}
바디 {font : 14px/1.5 arial;}
#box {너비 : 100px; 높이 : 100px; 배경 : #fef4eb; 패딩 : 5px; 마진 : 50px; 테두리 : 1px solid #f60;}
#box .Title {높이 : 25px; 배경 :#f60;}
#Tool {마진-바닥 : 10px;}
</스타일>
<script type = "text/javaScript">
기능 드래그 ()
{
// 初始化
this.initialize.apply (this, arguments)
}
drag.prototype = {
// 初始化
초기화 : 함수 (드래그, 옵션)
{
this.drag = this. $ (드래그);
this._x = this._y = 0;
this._movedrag = this.bind (this, this.movedRag);
this._stopdrag = this.bind (this, this.stopdrag);
this.setOptions (옵션);
this.handle = this. $ (this.options.handle);
this.maxcontainer = this. $ (this.options.maxcontainer);
this.maxtop = math.max (this.maxcontainer.clientHeight, this.MaxContainer.ScrollHeight) - this.drag.offSetheight;
this.maxleft = math.max (this.maxcontainer.clientwidth, this.maxcontainer.scrollwidth) - this.drag.offsetwidth;
this.limit = this.options.limit;
this.lockx = this.options.lockx;
this.locky = this.options.locky;
this.lock = this.options.lock;
this.onstart = this.options.onstart;
this.onmove = this.options.onmove;
this.onstop = this.options.onstop;
this.handle.style.cursor = "Move";
this.changelayout ();
this.addhandler (this.handle, "mousedown", this.bind (this, this.startgrag))
},
Changelayout : function ()
{
this.drag.style.top = this.drag.offsettop + "px";
this.drag.style.left = this.drag.offsetleft + "px";
this.drag.style.position = "절대";
this.drag.style.margin = "0"
},
startDrag : 함수 (이벤트)
{
var event = 이벤트 || Window.event;
this._x = event.clientx- this.drag.offsetleft;
this._y = event.clienty- this.drag.offsetTop;
this.addhandler (문서, "mousemove", this._movedrag);
this.addhandler (문서, "마우스 업", this._stopdrag);
event.preventDefault && event.preventDefault ();
this.handle.setcapture && this.handle.setcapture ();
this.onstart ()
},
Mizatrag : 함수 (이벤트)
{
var event = 이벤트 || Window.event;
var itop = event.clienty -this._y;
var ILEFT = Event.ClientX- this._x;
if (this.lock) 반환;
this.limit && (itop <0 && (itop = 0), ileft <0 && (ileft = 0), itop> this.maxtop && (itop = this.maxtop), ileft> this.maxleft && (ileft = this. maxleft));
this.locky || (this.drag.style.top = itop + "px");
this.lockx || (this.drag.style.left = ileft + "px");
event.preventDefault && event.preventDefault ();
this.onmove ()
},
stopdrag : function ()
{
this.removeHandler (문서, "MousEmove", this._movedRag);
this.removeHandler (문서, "마우스 업", this._stopdrag);
this.handle.releasecapture && this.handle.releasecapture ();
this.onstop ()
},
// 参数设置
세트 오프 : 함수 (옵션)
{
this.options =
{
핸들 : this.drag, // 事件对象
제한 : true, //,
잠금 : 거짓, //,
Lockx : 거짓, // 锁定水平位置
록키 : 거짓, // 锁定垂直位置
MaxContainer : Document.DocumentELement || document.body, //,
onstart : function () {}, // 开始时回调函数
Onmove : function () {}, // 拖拽时回调函数
onstop : function () {} // 停止时回调函数
};
for (옵션의 var p) this.options [p] = 옵션 [p]
},
// 获取 ID
$ : function (id)
{
return typeof id === "String"? document.getElementById (id) : id
},
// 添加绑定事件
Addhandler : 기능 (Oelement, Seventtype, Fnhandler)
{
return oelement.addeventListener? OELENT.ADDEVENTLISTERE (Seventtype, Fnhandler, False) : Oelement.attachevent ( "on" + Seventtype, fnhandler)
},
// 删除绑定事件
removeHandler : 함수 (OELEMENT, SEVENTYPE, FNHANDLER)
{
return oelement.removeeventListener? Oelement.removeEventListener (Seventtype, Fnhandler, False) : Oelement.detachevent ( "on" + Seventtype, fnhandler)
},
// 绑定事件到对象
바인드 : 기능 (Object, fnhandler)
{
반환 기능 ()
{
return fnhandler.apply (Object, Arguments)
}
}
};
// 应用
Window.onload = function ()
{
var obox = document.getElementById ( "box");
var otitle = obox.getElementsByTagName ( "h2") [0];
var ospan = document.getElementsByTagName ( "span") [0];
var odrag = new drag (obox, {handle : otitle, limit : false});
var ainput = document.getElementsByTagName ( "input");
// 锁定范围接口
ainput [0] .onclick = function ()
{
odrag.limit =! odrag.limit;
this.value = odrag.limit? "锁定范围": "取消锁定范围"
};
// 水平锁定接口
ainput [1] .onclick = function ()
{
odrag.lockx =! odrag.lockx;
this.value = odrag.lockx? "水平锁定": "取消水平锁定"
};
// 垂直锁定接口
ainput [2] .onclick = function ()
{
odrag.locky =! odrag.locky;
this.value = odrag.locky? "垂直锁定": "取消垂直锁定"
};
// 锁定位置接口
ainput [3] .onclick = function ()
{
odrag.lock =! odrag.lock;
this.value = odrag.lock? "锁定位置": "取消锁定位置"
};
// 开始拖拽时方法
odrag.onstart = function ()
{
ospan.innerhtml = "开始拖拽"
};
// 开始拖拽时方法
odrag.onmove = function ()
{
ospan.innerhtml = "왼쪽 :" + this.drag.offsetleft + ", 상단 :" + this.drag.offsettop
};
// 开始拖拽时方法
odrag.onstop = function ()
{
ospan.innerhtml = "结束拖拽"
};
};
</스크립트>
</head>
<body>
<div id = "도구">
<입력 유형 = "버튼"value = "锁定范围" />
<입력 유형 = "버튼"value = "水平锁定" />
<입력 유형 = "버튼"value = "垂直锁定" />
<입력 유형 = "버튼"value = "锁定位置" />
</div>
<p> ： ： <span> </span> </p>
<div id = "box">
<H2> </h2>
</div>
</body>
</html>
</td>
</tr>
</테이블>