位置：首页>> 网络编程>> JavaScript>> 一个非常有代表性的javascript简易拖动类

一个非常有代表性的javascript简易拖动类

　　发布时间：2009-05-25 12:44:00　

标签：拖动,类,JavaScript

一个封装好的JavaScript拖动类，使用方便：

<div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div>
<script>
new SimpleDrag("idDrag");
</script>

这样就可以使id为idDrag的层拖动了。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>简易拖放效果</title></head><body><script>var isIE = (document.all) ? true : false;// 是否ievar $ = function (id) {//返回id对象return "string" == typeof id ? document.getElementById(id) : id;};var Class = {// 带构造方法的类create: function() {return function() { this.initialize.apply(this, arguments); } //用apply应用下面的initialize初始化属性}}var Extend = function(destination, source) {//继承for (var property in source) {destination[property] = source[property];}}var Bind = function(object, fun) {return function() {return fun.apply(object, arguments);}}/**用object对象调用fun参数是event||window event**/var BindAsEventListener = function(object, fun) {return function(event) {return fun.call(object, (event || window.event));}}/**添加帧听器事件@oTarget 目标对象@sEventType 事件类型@fnHandler 目标触发事件对象**/function addEventHandler(oTarget, sEventType, fnHandler) {if (oTarget.addEventListener) {oTarget.addEventListener(sEventType, fnHandler, false);//firefox} else if (oTarget.attachEvent) {oTarget.attachEvent("on" + sEventType, fnHandler);//ie} else {oTarget["on" + sEventType] = fnHandler;//other}};/**清除添加的帧听器事件@oTarget 目标对象@sEventType 事件类型@fnHandler 目标触发事件对象**/function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; }};/*------------------------------相关模型构造完毕-----------------------------------*///拖放程序var SimpleDrag = Class.create();SimpleDrag.prototype = { //拖放对象,触发对象,初始化 initialize: function(drag) {this.Drag = $(drag);this._x = this._y = 0;this._fM = BindAsEventListener(this, this.Move);//_fM方法就是应用MOVE方法参数是event||window.eventthis._fS = Bind(this, this.Stop);//_fS类方法就是Stop方法this.Drag.style.position = "absolute";this.Drag.style.cursor = "move";addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); }, //准备拖动 Start: function(oEvent) {this._x = oEvent.clientX - this.Drag.offsetLeft;this._y = oEvent.clientY - this.Drag.offsetTop;addEventHandler(document, "mousemove", this._fM);addEventHandler(document, "mouseup", this._fS); }, //拖动 Move: function(oEvent) {this.Drag.style.left = oEvent.clientX - this._x + "px";this.Drag.style.top = oEvent.clientY - this._y + "px"; }, //停止拖动 Stop: function() {removeEventHandler(document, "mousemove", this._fM);removeEventHandler(document, "mouseup", this._fS); }};</script><div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div><script>new SimpleDrag("idDrag");</script></body></html>

投稿

一个非常有代表性的javascript简易拖动类

猜你喜欢