Behavior模型应用：可拖动的div容器
2008-05-23 14:46
453 查看
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()
{
$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();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Behavior模型应用：可拖动的div容器
- jquery的":focus"选择器，不适合应用在div容器上，更有ie6、7的支持问题
- 【※】非限定宽度横向滚动应用实例(DIV + CSS、鼠标拖动)
- 文字横向滚动应用实例(DIV + CSS、鼠标拖动)
- 微软WPF技术应用与实践系列(窗体与导航+容器+模型+数据绑定配多个应用案例)
- 文字纵向滚动应用实例(DIV + CSS、鼠标拖动)
- 鼠标拖动改变div容器的大小
- div容器中的图片拖动 俺的创作
- Qt容器类的对象模型及应用（线性结构篇）（好多图，比较清楚）
- jquery 拖动改变div 容器大小
- DIV 层拖动应用
- 可拖动排序DIV
- 解决Firefox及其类似浏览器div折叠及因此而引起的不能应用背景色的解决方法
- 可拖动DIV
- 【Kubernetes】最佳实践2：获取容器应用日志
- Linux 系统应用编程——网络编程（I/O模型）
- css基础-盒子（div）模型、属性、边框线的设置、padding、margin、网站的设置思想（float），图片代替列表符号
- Linux设备驱动模型之上层容器
- JQuery实现DIV拖动效果示例
- Laravel 模型事件的应用