VS 2008
应用Asp.Net Ajax behavior模型，做了一个简单的可拖动的div ^_^
1. html页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body style="margin:0px;">
<form id="form1" runat="server">
<asp:ScriptManager ID="sMgr" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Behaviors/DragBehavior.js" />
</Scripts>
</asp:ScriptManager>
<div id="divDrag" style="position:fixed; width:500px;height:200px;border:solid 1px #000000;">
<ul style="list-style:none; margin:0px; padding:0px;">
<li style="height:30px; background-color:#cccccc;"></li>
<li>
</li>
</ul>
</div>
</form>
<script type="text/javascript">
Sys.Application.add_init(function() 
{
$create(Tristan.DragBehavior, {}, {}, {}, $get('divDrag'));
});
</script>
</body>
</html>
2. client behavior javascript library
/**//// <reference name="MicrosoftAjax.js"/>
/// written by Guozhijian 2008/01/22
Type.registerNamespace("Tristan");
Tristan.DragBehavior = function(element) {
Tristan.DragBehavior.initializeBase(this, [element]);
this._isMouseDown = false;
this._preLocation = null;
this._mouseDownX = null;
this._mouseDownY = null;
}
Tristan.DragBehavior.prototype = {
initialize: function() {
Tristan.DragBehavior.callBaseMethod(this, 'initialize');
// Add custom initialization here
$addHandlers(this.get_element(), {
'mousedown' : this._onMouseDown
}, this);
$addHandlers(document, {
'mousemove' : this._onMouseMove,
'mouseup' : this._onMouseUp
}, this);
},
dispose: function() {
//Add custom dispose actions here
$clearHandlers(this.get_element());
$clearHandlers(document);
Tristan.DragBehavior.callBaseMethod(this, 'dispose');
},
_onMouseDown : function(evt) {
if(evt.button == Sys.UI.MouseButton.leftButton) {
this._isMouseDown = true;
this._preLocation = Sys.UI.DomElement.getLocation( this.get_element() );
this._mouseDownX = evt.clientX;
this._mouseDownY = evt.clientY;
this.get_element().style.cursor = 'move';
}
},
_onMouseUp : function() {
this._isMouseDown = false;
this.get_element().style.cursor = 'normal';
},
_onMouseMove : function(evt) {
if(this._isMouseDown) {
var deltaX = evt.clientX - this._mouseDownX;
var deltaY = evt.clientY - this._mouseDownY;
var x = this._preLocation.x + deltaX;
var y = this._preLocation.y + deltaY;
if(this._checkLocation(x, y)) {
Sys.UI.DomElement.setLocation(this.get_element(), x, y);
}
}
},
_checkLocation : function(x, y) {
var el = this.get_element();
var b = Sys.UI.DomElement.getBounds(el);
if(x + b.width >= document.documentElement.clientWidth || x <=0 || y + b.height >= document.documentElement.clientHeight || y <= 0) {
return false;
}
else {
return true;
}
}
}
Tristan.DragBehavior.registerClass('Tristan.DragBehavior', Sys.UI.Behavior);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
posted on 2008-02-22 21:58
Tristan(GuoZhijian) 阅读(355)
评论(2) 编辑 收藏 所属分类:
Asp.Net Ajax