Behavior模型应用：可拖动的div容器
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();
应用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() {
Sys.Application.add_init(function() 
$create(Tristan.DragBehavior, {}, {}, {}, $get('divDrag'));
$create(Tristan.DragBehavior, }); </script></body></html>2. client behavior javascript library
/// <reference name="MicrosoftAjax.js"/>/// written by Guozhijian 2008/01/22Type.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();