复制代码代码如下:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> 拖拽库 </title>
<style type = "text/css">
div, h2, p {margen: 0; relleno: 0;}
cuerpo {fuente: 14px/1.5 arial;}
#box {ancho: 100px; altura: 100px; fondo: #fef4eb; padding: 5px; margen: 50px; borde: 1px sólido #f60;}
#box .title {altura: 25px; fondo:#f60;}
#Tool {margin-bottom: 10px;}
</style>
<script type = "text/javaScript">
función drag ()
{
// 初始化
this.initialize.apply (esto, argumentos)
}
Drag.prototype = {
// 初始化
Inicializar: función (arrastre, opciones)
{
this.drag = this. $ (drag);
this._x = this._y = 0;
this._movedrag = this.bind (this, this.moveDrag);
this._stopdrag = this.bind (this, this.stopdrag);
this.setOptions (opciones);
this.handle = this. $ (this.options.handle);
this.maxContainer = this. $ (this.options.maxContainer);
this.maxtop = Math.max (this.maxContainer.clientheight, this.maxcontainer.scrollheight) - this.drag.offsetheTight;
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.startdrag))
},
ChangeLayout: function ()
{
this.drag.style.top = this.drag.offsettop + "px";
this.drag.style.left = this.drag.offsetleft + "px";
this.drag.style.position = "Absolute";
this.drag.style.margin = "0"
},
startdrag: función (evento)
{
VAR Event = Event || Window.event;
this._x = event.clientx - this.drag.offsetleft;
this._y = event.clienty - this.drag.offsettop;
this.addhandler (documento, "mouseMove", this._moveDrag);
this.addhandler (documento, "mouseup", this._stopdrag);
event.preventDefault && event.preventDefault ();
this.handle.setCapture && this.handle.setCapture ();
this.onstart ()
},
MovedRag: función (evento)
{
VAR Event = Event || Window.event;
var iTop = event.clienty - this._y;
var ileft = event.clientx - this._x;
if (this.lock) return;
this.limit && (iTop <0 && (iTop = 0), ileft <0 && (ileSft = 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 (documento, "mouseMove", this._movedrag);
this.removeHandler (documento, "mouseup", this._stopdrag);
this.handle.ReleaseCapture && this.handle.ReleaseCapture ();
this.onstop ()
},
// 参数设置
setOptions: función (opciones)
{
this.options =
{
Mango: this.drag, // 事件对象
Límite: Verdadero, // 锁定范围
bloqueo: falso, // 锁定位置
LOCKX: FALSO, // 锁定水平位置
Locky: False, // 锁定垂直位置
MaxContainer: document.DocumentElement || document.body, // 指定限制容器
onStart: function () {}, // 开始时回调函数
onmove: function () {}, // 拖拽时回调函数
onStop: function () {} // 停止时回调函数
};
para (var p en opciones) this.options [p] = opciones [P]
},
// 获取 ID
$: función (ID)
{
return typeOf id === "cadena"? document.getElementById (ID): ID
},
// 添加绑定事件
AddHandler: función (OELEMENT, SEVVENTTYPE, FNHANDLER)
{
return oelement.addeventListener? OELEMENT.AdDeventListener (seventType, fnhandler, falso): oelement.attachevent ("on" + seventType, fnhandler)
},
// 删除绑定事件
Remouthandler: función (OELEMENT, SEVVENTTYPE, FNHANDLER)
{
devolver oelement.removeEventListener? OELEMENT.REMOVEVENTLISTENER (SEVVENTTYPE, FNHANDLER, FALSO): OELEMENT.DETACHEVENT ("ON" + SEVVENTYPE, FNHANDLER)
},
// 绑定事件到对象
Bind: Function (Object, FnHandler)
{
Función de retorno ()
{
return fnhandler.apply (objeto, argumentos)
}
}
};
// 应用
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 ("entrada");
// 锁定范围接口
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 = "izquierda:" + this.drag.offsetleft + ", arriba:" + this.drag.offsettop
};
// 开始拖拽时方法
odrag.onstop = function ()
{
oSpan.innerhtml = "结束拖拽"
};
};
</script>
</ablo>
<Body>
<div id = "herramienta">
<input type = "button" value = "锁定范围" />
<input type = "button" value = "水平锁定" />
<input type = "button" value = "垂直锁定" />
<input type = "button" value = "锁定位置" />
</div>
<p> 拖放状态 ： <span> 未开始 </span> </p>
<div id = "box">
<h2> </h2>
</div>
</body>
</html>
</td>
</tr>
</table>