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

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

一个封装好的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

投稿

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

猜你喜欢

空间session失效过快的解决办法

深入研究Application和Session对象

网页设计详细教程之XML简便省力技巧五则

小白讲座：在win下mysql备份恢复命令概括

最新的关键SQL Server漏洞已被微软证实

JavaScript解决Joseph问题

另类读写：ACCESS中Field对象的标题属性

怎么样才能让ASP避免被SQL注入啊?

BigPipe:高性能的"流水线技术"网页

有用的SQL语句（删除重复记录，收缩日志）

关于 Web，你可能不知道的

解决MySQL不允许从远程访问的方法

如何判断发言是否为空？

YUI Grids CSS 解读

Access 2003开发者扩展工具集概述

轻松掌握如何从命令行启动mysqld服务器

制定设计的原则

删除多余的属性 xmlns=""

设计良好网页的4项原则

10个精致的导航菜单欣赏及点评