这两周周末终于决定忙里偷闲,利用业余时间好好学习ASP.NET AJAX,虽然服务器端控件比如UpdatePanel、Timer等很好用,不过总感觉雾里看花,没法看到ASP.NET AJAX的原貌,所以决定花些时间学习它的Client Library。断断续续看了一些资料,在稍微了解大概之后决定用它写点东西检验一下学习成果,毕竟实际动手才能证明我确实掌握了这门技术,而不仅是纸上谈兵,呵呵。
拖拽效果目前非常流行,比如Pageflakes、protopage等都频繁使用了这项技术用以改善用户体验并且获得良好的赞誉。很多人对这项技术深感恐惧,好像它是一门极为高深的技术,我在很多论坛上看到好些人都在“冰天雪地裸体后空翻720度”求教具体如何实现,实际上这项技术本身并不复杂,简单的拖拽效果区区几十行代码就可以搞定了。下面就简单实现一个拖拽DIV的效果。
首先不考虑ASP.NET AJAX,用最原始的Javascript来实现我们想要的效果,区区二十余行代码就可以了,相信任何有点Javascript基础的同志都可以看得很明白,因此我就不多说了,贴代码了事:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
可移动的Div(1):MovableDiv
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function MovableDiv(id)
{
this.obj = document.getElementById(id);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.obj.onmousedown = function()
{
if (event.srcElement != this) return;
this._deltaX = event.x - this.offsetLeft;
this._deltaY = event.y - this.offsetTop;
this._dragging = true;
this.setCapture();
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.obj.onmousemove = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._dragging)
{
var x = event.x - this._deltaX;
x = x < 0 ? 0 : x;
var y = event.y - this._deltaY;
y = y < 0 ? 0 : y;
this.style.left = x + "px";
this.style.top = y + "px";
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.obj.onmouseup = function()
{
this._dragging = false;
this.releaseCapture();
};
}
具体使用时就是实例化一个MovableDiv对象即可,如"new MovableDiv('div1');"。当然,记得给div1设置position为“absolute”,否则有啥意外我概不负责,呵呵!
好,上面代码完全没有使用任何ASP.NET AJAX的特性,下面利用ASP.NET AJAX Client Library提供的机制实现完全相同功能,呵呵,解释这些代码实在费劲,而且现在不是提倡“代码即文档”嘛,相信大家的能力以及我的编码规范程度(自恋一把,喉喉),同样贴出代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
可移动的Div(2):WidgetContainer
Type.registerNamespace("Monster");
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Monster.WidgetContainer = function(element)
{
Monster.WidgetContainer.initializeBase(this, [element]);
this._mouseDownDelegate = null;
this._mouseMoveDelegate = null;
this._mouseUpDelegate = null;
this._dragging = false;
this._deltaX = 0;
this._deltaY = 0;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Monster.WidgetContainer.prototype =
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initialize: function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._mouseDownDelegate === null)
{
this._mouseDownDelegate = Function.createDelegate(this, this._mouseDownHandler);
}
$addHandler(this.get_element(), "mousedown", this._mouseDownDelegate);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._mouseMoveDelegate === null)
{
this._mouseMoveDelegate = Function.createDelegate(this, this._mouseMoveHandler);
}
$addHandler(this.get_element(), "mousemove", this._mouseMoveDelegate);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._mouseUpDelegate === null)
{
this._mouseUpDelegate = Function.createDelegate(this, this._mouseUpHandler);
}
$addHandler(this.get_element(), "mouseup", this._mouseUpDelegate);
Monster.WidgetContainer.callBaseMethod(this, "initialize");
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
dispose: function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._mouseDownDelegate)
{
$removeHandler(this.get_element(), "mousedown", this._mouseDownDelegate);
delete this._moseDownDelegate;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._mouseMoveDelegate)
{
$removeHandler(this.get_element(), "mousemove", this._mouseMoveDelegate);
delete this._mouseMoveDelegate;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._mouseUpDelegate)
{
$removeHandler(this.get_element(), "mouseup", this._mouseUpDelegate);
delete this._mouseUpDelegate;
}
Monster.WidgetContainer.callBaseMethod(this, "dispose");
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_mouseDownHandler: function(e)
{
this._dragging = true;
this._deltaX = e.offsetX;
this._deltaY = e.offsetY;
this.get_element().setCapture();
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_mouseMoveHandler: function(e)
{
if (!this._dragging) return;
var left = this.get_element().offsetLeft + e.offsetX - this._deltaX;
left = left < 0 ? 0 : left;
var top = this.get_element().offsetTop + e.offsetY - this._deltaY;
top = top < 0 ? 0 : top;
Sys.UI.DomElement.setLocation(this.get_element(), left, top);
},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_mouseUpHandler: function(e)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this._dragging)
{
this._dragging = false;
this.get_element().releaseCapture();
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Monster.WidgetContainer.registerClass("Monster.WidgetContainer", Sys.UI.Control);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
if (typeof(Sys) != "undefined") Sys.Application.notifyScriptLoaded();
同样,列出使用方法如下,这里使用了“$create”进行创建,这是创建Sys.Component及其子类如Sys.UI.Control等的简写形式:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
创建WidgetContainer
<script type="text/javascript" language="javascript">
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function pageLoad(sender, args)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$create(Monster.WidgetContainer,
{ },
{ }, null, $get("div1"));
}
</script>
在写的过程中我就暗暗皱眉,怎么写了半天还没完?在没用ASP.NET AJAX Client Library之前,我3分钟就把移动效果运行起来了,而现在10分钟都过去了还没搞定!写完一对比,代码量多出N倍,为了实现相同的效果,我居然写了近80行代码,晕死!虽然看起来更OO些,非常像C#这种高级语言,但是这样的效果值得吗?对于熟悉Javascript的开发人员而言,说不定第一种写法更加直观呢!前一阵子不知在什么地方看到这样的评论:ASP.NET AJAX Client Library对JavaScript的封装接近病态!是不是真的如此我不知道,不过从开发效率而言似乎反而降低了?!也许这种写法对后期维护有好处,这也许能弥补一部分损失吧,不过我还是不知道!
注:WidgetContainer是MovableDiv的翻版,但是不知道为什么,如果拖动WidgetContainer所代表的div到浏览器窗口的右边缘或下边缘外,就会出现很诡异的现象,目前位置还不明白为什么,有心的同志可以帮忙看看,谢谢先!
附:由于使用了setCapture和releaseCapture,因此上面的代码只能在IE浏览器中运行。
update @07.04.11 13:48
不过,再仔细看看,在ASP.NET AJAX方式的实现中也就是多了initialize和dispose两个方法,用于初始化和资源释放,不过这样做有什么好处呢?即使我不释放好像也不会造成什么损失吧。有劳对此比较熟悉的大佬给我讲讲,嘿嘿@_@