■■■■■■■■■■■■ 我的第一个插件 (求优化代码) ■■■■■■■■■■■■■■■拖动 div 插件代码如下： --------文件名： JS/Drap.js
/////////////////////////////////////////////////////////////////
// 拖动 div 插件代码如下：
/////////////////////////////////////////////////////////////////
// 事件
var AboutEvent = function(){
//增加 事件 处理function
this.addEventHandler=
function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//移除 事件 处理function
this.removeEventHandler = function (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;
}
};
//用法
//addEventHandler(document, "mousemove", f1);
//addEventHandler(document, "mouseup", f2);
};
// c: 点击处
// m: 移动区
var _Drap = function(c,m){
//缓存this
var _this=this;
//字符串?JQ对象?DOM 对象?;
//返回JQuery 对象
this.IsDomOrJQuery = function(Para){
//是字符串 id
if(typeof(Para)=="string")
{
return $("#"+Para);
}
//是JQ对象
else if(typeof(Para)=="object"&& typeof(Para[0])=="object"&&Para[0].toString().substring(0,11)=="[object HTML") //
{
//"dd".substring(
return Para;
}
//是dom 对象
else if(Para.toString().substring(0,11)=="[object HTML" && typeof(Para)=="object")
{
return $(Para);
}
else
{
return false;
}
};
// 点击的JQ 对象
this.clickObj=this.IsDomOrJQuery(c);
//移动的JQ 对象
this.moveObj=this.IsDomOrJQuery(m);
//拖动总开关
this.canBeDrap;
//标记 是不是正在拖动中
this.IsDraping;
// 整体的大小；
this.width ;
this.height;
this.top;
this.left;
//当前鼠标
this.centerX;
this.centerY;
//移动前鼠标
this.lastX;
this.lastY;
// 定时器；
// 拖动 div 跟综 定时器
this.followTimer;
// 构造 函数； 手动调用
this.F_Drap=function(){
if(this.clickObj&&this.moveObj)
{
var MoveEvent=new AboutEvent();
MoveEvent.addEventHandler(this.clickObj[0],"mousedown",this.ObjMouseDown);
MoveEvent.addEventHandler(document.body,"mousemove",this.DocumentMouseMove);
}
};
this.AllowDrap=function(){
this.canBeDrap=true;
};
this.CancelDrap=function(){
this.canBeDrap=false;
};
this.ObjMouseDown = function(ev)
{
if(_this.canBeDrap)
{
ev = ev || window.event; // 事件
//记录 //点下时的鼠标座标
_this.lastX=_this.centerX = ev.clientX;
_this.lastY=_this.centerY = ev.clientY;
_this.IsDraping=true;
//设定定时器跟综
if(_this.followTimer)
{
clearInterval(_this.followTimer);
}
_this.followTimer= setInterval(function(){
//跟综 函数
if(_this.canBeDrap)
{
if(_this.lastX!=_this.centerX )
{
var AddtoX =parseInt(_this.moveObj.css("left"))+_this.centerX-_this.lastX;
_this.moveObj.css("left",AddtoX.toString()+"px");
}
if( _this.lastY!=_this.centerY)
{
var AddtoY =parseInt(_this.moveObj.css("top"))+_this.centerY-_this.lastY;
_this.moveObj.css("top",AddtoY.toString()+"px");
}
_this.lastX=_this.centerX;
_this.lastY=_this.centerY;
}
},100);
//下面可以加下颜色 标记
}
};
this.DocumentMouseMove = (function(that){
return (function(ev){
ev = ev || window.event; // 事件
that.centerX=ev.clientX;
that.centerY=ev.clientY;
});
})(this);
};■■■■■■■■■■■■ 插件代码完毕 (求优化代码) ■■■■■■■■■■■■■■■
■■■■■■■■■■■■ 下面是插件的应用 ■■■■■■■■■■■■■■■
如下应用：
<html >
<head runat="server">
<title></title> <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script src="JS/Drap.js" type="text/javascript"></script>
<style type="text/css">
#divMoveTest
{
width: 200px;
height: 500px;
position: absolute;
top:100px;
left:100px;
margin: 1px;
padding: 1px;
border-color:Green;
border-width:1px;
border-style:solid;
background-color:#e0e0e5;
}
#divClickTest
{
border-color:Yellow;
background-color:#304054;
color:White;
border-width:1px;
border-style:solid;
height:20px;
width:100%;
cursor:pointer;
}
</style>
<script type="text/javascript">
//下面是应用代码： var dr = new _Drap("divClickTest","divMoveTest"); //声明一个对象
dr.F_Drap(); //手动调用它的构造函数。
dr.AllowDrap(); //允许拖动的总开关 打开 <script/>
</head>
<body>
<form id="form1" runat="server">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="divMoveTest">
<div id="divClickTest"></div>
</div>
</div>
</form>
</body>
</html>
■■■■■■■■■■■■ 下面是插件的应用 ■■■■■■■■■■■■■■■
/////////////////////////////////////////////////////////////////
// 拖动 div 插件代码如下：
/////////////////////////////////////////////////////////////////
// 事件
var AboutEvent = function(){
//增加 事件 处理function
this.addEventHandler=
function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//移除 事件 处理function
this.removeEventHandler = function (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;
}
};
//用法
//addEventHandler(document, "mousemove", f1);
//addEventHandler(document, "mouseup", f2);
};
// c: 点击处
// m: 移动区
var _Drap = function(c,m){
//缓存this
var _this=this;
//字符串?JQ对象?DOM 对象?;
//返回JQuery 对象
this.IsDomOrJQuery = function(Para){
//是字符串 id
if(typeof(Para)=="string")
{
return $("#"+Para);
}
//是JQ对象
else if(typeof(Para)=="object"&& typeof(Para[0])=="object"&&Para[0].toString().substring(0,11)=="[object HTML") //
{
//"dd".substring(
return Para;
}
//是dom 对象
else if(Para.toString().substring(0,11)=="[object HTML" && typeof(Para)=="object")
{
return $(Para);
}
else
{
return false;
}
};
// 点击的JQ 对象
this.clickObj=this.IsDomOrJQuery(c);
//移动的JQ 对象
this.moveObj=this.IsDomOrJQuery(m);
//拖动总开关
this.canBeDrap;
//标记 是不是正在拖动中
this.IsDraping;
// 整体的大小；
this.width ;
this.height;
this.top;
this.left;
//当前鼠标
this.centerX;
this.centerY;
//移动前鼠标
this.lastX;
this.lastY;
// 定时器；
// 拖动 div 跟综 定时器
this.followTimer;
// 构造 函数； 手动调用
this.F_Drap=function(){
if(this.clickObj&&this.moveObj)
{
var MoveEvent=new AboutEvent();
MoveEvent.addEventHandler(this.clickObj[0],"mousedown",this.ObjMouseDown);
MoveEvent.addEventHandler(document.body,"mousemove",this.DocumentMouseMove);
}
};
this.AllowDrap=function(){
this.canBeDrap=true;
};
this.CancelDrap=function(){
this.canBeDrap=false;
};
this.ObjMouseDown = function(ev)
{
if(_this.canBeDrap)
{
ev = ev || window.event; // 事件
//记录 //点下时的鼠标座标
_this.lastX=_this.centerX = ev.clientX;
_this.lastY=_this.centerY = ev.clientY;
_this.IsDraping=true;
//设定定时器跟综
if(_this.followTimer)
{
clearInterval(_this.followTimer);
}
_this.followTimer= setInterval(function(){
//跟综 函数
if(_this.canBeDrap)
{
if(_this.lastX!=_this.centerX )
{
var AddtoX =parseInt(_this.moveObj.css("left"))+_this.centerX-_this.lastX;
_this.moveObj.css("left",AddtoX.toString()+"px");
}
if( _this.lastY!=_this.centerY)
{
var AddtoY =parseInt(_this.moveObj.css("top"))+_this.centerY-_this.lastY;
_this.moveObj.css("top",AddtoY.toString()+"px");
}
_this.lastX=_this.centerX;
_this.lastY=_this.centerY;
}
},100);
//下面可以加下颜色 标记
}
};
this.DocumentMouseMove = (function(that){
return (function(ev){
ev = ev || window.event; // 事件
that.centerX=ev.clientX;
that.centerY=ev.clientY;
});
})(this);
};■■■■■■■■■■■■ 插件代码完毕 (求优化代码) ■■■■■■■■■■■■■■■
■■■■■■■■■■■■ 下面是插件的应用 ■■■■■■■■■■■■■■■
如下应用：
<html >
<head runat="server">
<title></title> <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script src="JS/Drap.js" type="text/javascript"></script>
<style type="text/css">
#divMoveTest
{
width: 200px;
height: 500px;
position: absolute;
top:100px;
left:100px;
margin: 1px;
padding: 1px;
border-color:Green;
border-width:1px;
border-style:solid;
background-color:#e0e0e5;
}
#divClickTest
{
border-color:Yellow;
background-color:#304054;
color:White;
border-width:1px;
border-style:solid;
height:20px;
width:100%;
cursor:pointer;
}
</style>
<script type="text/javascript">
//下面是应用代码： var dr = new _Drap("divClickTest","divMoveTest"); //声明一个对象
dr.F_Drap(); //手动调用它的构造函数。
dr.AllowDrap(); //允许拖动的总开关 打开 <script/>
</head>
<body>
<form id="form1" runat="server">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="divMoveTest">
<div id="divClickTest"></div>
</div>
</div>
</form>
</body>
</html>
■■■■■■■■■■■■ 下面是插件的应用 ■■■■■■■■■■■■■■■
下面才是；
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title> <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<style type="text/css">
#divMoveTest
{
width: 200px;
height: 500px;
position: absolute;
top:100px;
left:100px;
margin: 1px;
padding: 1px;
border-color:Green;
border-width:1px;
border-style:solid;
background-color:#e0e0e5;
}
#divClickTest
{
border-color:Yellow;
background-color:#304054;
color:White;
border-width:1px;
border-style:solid;
height:20px;
width:100%;
}
</style> <script type="text/javascript">
/////////////////////////////////////////////////////////////////
//拖动 DRAP class
//
//
//
/////////////////////////////////////////////////////////////////
//// 事件 var AboutEvent = function(){
//增加 事件 处理function
this.addEventHandler=
function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//移除 事件 处理function
this.removeEventHandler = function (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;
}
};
//用法
//addEventHandler(document, "mousemove", f1);
//addEventHandler(document, "mouseup", f2);
};
// c: 点击处
// m: 移动区
var _Drap = function(c,m){
//缓存this
var _this=this;
//字符串?JQ对象?DOM 对象?;
//返回JQuery 对象
this.IsDomOrJQuery = function(Para){
//是字符串 id
if(typeof(Para)=="string")
{
return $("#"+Para);
}
//是JQ对象
else if(typeof(Para)=="object"&& typeof(Para[0])=="object"&&Para[0].toString().substring(0,11)=="[object HTML") //
{
//"dd".substring(
return Para;
}
//是dom 对象
else if(Para.toString().substring(0,11)=="[object HTML" && typeof(Para)=="object")
{
return $(Para);
}
else
{
return false;
}
};
// 点击的JQ 对象
this.clickObj=this.IsDomOrJQuery(c);
//移动的JQ 对象
this.moveObj=this.IsDomOrJQuery(m);
//事件对象
this.MoveEvent=new AboutEvent();
//拖动总开关
this.canBeDrap;
//标记 是不是正在拖动中
this.IsDraping;
// 整体的大小；
this.width ;
this.height;
this.top;
this.left;
//当前鼠标
this.centerX;
this.centerY;
//移动前鼠标
this.lastX;
this.lastY;
// 定时器；
// 拖动 div 跟综 定时器
this.followTimer;
// 构造 函数； 手动调用
this.F_Drap=function(){
if(this.clickObj&&this.moveObj)
{
this.MoveEvent.addEventHandler(this.clickObj[0],"mousedown",this.ObjMouseDown);
this.MoveEvent.addEventHandler(document.body,"mouseup",this.DocumentMouseUp);
}
};
//总开关 开
this.AllowDrap=function(){
this.clickObj.css("cursor","move"); //:move;cursor:default;
this.canBeDrap=true;
};
//总开关 关
this.CancelDrap=function(){
this.clickObj.css("cursor","default"); //:move;cursor:default;
this.canBeDrap=false;
};
this.ObjMouseDown = function(ev)
{
if(_this.canBeDrap)
{
//动态添加 跟踪 函数
_this.MoveEvent.addEventHandler(document.body,"mousemove",_this.DocumentMouseMove);
//标记当前状态为 拖动状态
_this.IsDraping= true;
ev = ev || window.event; // 事件
//记录 //点下时的鼠标座标
_this.lastX=_this.centerX = ev.clientX;
_this.lastY=_this.centerY = ev.clientY;
_this.IsDraping=true;
//设定定时器跟综
if(_this.followTimer)
{
clearInterval(_this.followTimer);
}
_this.followTimer= setInterval(function(){
//跟综 函数
if(_this.canBeDrap)
{
if(_this.lastX!=_this.centerX )
{
var AddtoX =parseInt(_this.moveObj.css("left"))+_this.centerX-_this.lastX;
_this.moveObj.css("left",AddtoX.toString()+"px");
}
if( _this.lastY!=_this.centerY)
{
var AddtoY =parseInt(_this.moveObj.css("top"))+_this.centerY-_this.lastY;
_this.moveObj.css("top",AddtoY.toString()+"px");
}
_this.lastX=_this.centerX;
_this.lastY=_this.centerY;
}
},80);
//下面可以加下颜色 标记
}
};
this.DocumentMouseUp=(function(that){
return (function(ev){
if(_this.IsDraping== false)
{
return;
}
//标记当前状态为 非拖动状态
_this.IsDraping= false;
if(that.followTimer)
{
clearInterval(that.followTimer);
that.followTimer=false;
}
//定位
if(_this.lastX!=_this.centerX )
{
var AddtoX =parseInt(_this.moveObj.css("left"))+_this.centerX-_this.lastX;
_this.moveObj.css("left",AddtoX.toString()+"px");
}
if( _this.lastY!=_this.centerY)
{
var AddtoY =parseInt(_this.moveObj.css("top"))+_this.centerY-_this.lastY;
_this.moveObj.css("top",AddtoY.toString()+"px");
}
ev = ev || window.event; // 事件
_this.lastX=_this.centerX = ev.clientX;
_this.lastY=_this.centerY = ev.clientY;
//消息 跟踪 函数
_this.MoveEvent.removeEventHandler(document.body,"mousemove",_this.DocumentMouseMove);
});
})(this);
this.DocumentMouseMove = (function(that){
return (function(ev){
ev = ev || window.event; // 事件
that.centerX=ev.clientX;
that.centerY=ev.clientY;
});
})(this);
};
// 点击的JQ 对象
_Drap.prototype.canBeDrap=false;
//标记 是不是正在拖动中
$(function(){
var dr = new _Drap("divClickTest","divMoveTest");
dr.F_Drap();
dr.AllowDrap();
});
</script>
</head>
<body>
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="divMoveTest">
<div id="divClickTest"></div>
</div>
</div>
</body>
</html>
就是一个拖动的div啊！
我把代码封成类，方便使用啊？
当然现在我又有了更完善的板本了，可以设定范围了。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title> <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<style type="text/css">
#divMoveTest
{
width: 200px;
height: 500px;
top:100px;
left:100px;
margin: 1px;
padding: 1px;
border-color:Green;
border-width:1px;
border-style:solid;
background-color:#e0e0e5;
}
#divClickTest
{
border-color:Yellow;
background-color:#304054;
color:White;
border-width:1px;
border-style:solid;
height:20px;
width:100%;
}
</style> <script type="text/javascript">
///////////////////////////////////////////////////////////////////////////////////
// 拖动 DRAP class
// var dr = new _Drap("divClickTest","divMoveTest"); //声明一个对象
//divClickTest 点击的div
//divMoveTest 移动的div
// dr.F_Drap(); //手动调用它的构造函数。
// dr.AllowDrap(); //允许拖动的总开关 打开 它默认是true
//
//
///////////////////////////////////////////////////////////////////////////////////
//// 事件 var AboutEvent = function(){
//增加 事件 处理function
this.addEventHandler=
function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//移除 事件 处理function
this.removeEventHandler = function (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;
}
};
//用法
//addEventHandler(document, "mousemove", f1);
//addEventHandler(document, "mouseup", f2);
};
// c: 点击处
// m: 移动区
var _Drap = function(c,m){
//缓存this
var _this=this;
//字符串?JQ对象?DOM 对象?;
//返回JQuery 对象
this.IsDomOrJQuery = function(Para){
//是字符串 id
if(typeof(Para)=="string")
{
return $("#"+Para);
}
//是JQ对象
else if(typeof(Para)=="object"&& typeof(Para[0])=="object"&&Para[0].toString().substring(0,11)=="[object HTML") //
{
//"dd".substring(
return Para;
}
//是dom 对象
else if(Para.toString().substring(0,11)=="[object HTML" && typeof(Para)=="object")
{
return $(Para);
}
else
{
return false;
}
};
// 点击的JQ 对象
this.clickObj=this.IsDomOrJQuery(c);
//移动的JQ 对象
this.moveObj=this.IsDomOrJQuery(m);
//事件对象
this.MoveEvent=new AboutEvent();
//拖动总开关
this.canBeDrap;
// 是不是开始范围限定
this.isLimit;
//范围
this.LimitMinX;
this.LimitMaxX;
this.LimitMinY;
this.LimitMaxY;
//标记 是不是正在拖动中
this.IsDraping;
// 整体的大小；
this.width ;
this.height;
this.top;
this.left;
//窗体最大
this.MaxX;
this.MaxY;
//this.alertMax=function(){return (this.MaxX+":"+this.MaxY);};
//当前鼠标
this.centerX;
this.centerY;
// 上一步鼠标
this.BeforeX;
this.BeforeY;
//移动前鼠标
this.lastX;
this.lastY;
//移动前鼠标差
this.DiffX;
this.DiffY;
// 定时器；
// 拖动 div 跟综 定时器
this.followTimer;
//范围设定
this.SetLimit= function(minX,minY,maxX,maxY){
this.LimitMinX=minX;
this.LimitMaxX=maxX;
this.LimitMinY=minY;
this.LimitMaxY=maxY;
};
// 构造 函数； 手动调用
this.F_Drap=function(){
this.moveObj.css("position","absolute");
if(this.clickObj&&this.moveObj)
{
this.MoveEvent.addEventHandler(this.clickObj[0],"mousedown",this.ObjMouseDown);
this.MoveEvent.addEventHandler(document.body,"mouseup",this.DocumentMouseUp);
//大小 位置记录
this.width= parseInt(this.moveObj.css("width"));
this.height= parseInt(this.moveObj.css("height"));
this.top= parseInt(this.moveObj.css("top"));
this.left= parseInt(this.moveObj.css("left"));
//
this.MaxX = parseInt($(document.body).css("width"));
this.MaxY = parseInt($(document.body).css("height"));
//范围
this.LimitMinX=0;
this.LimitMaxX=this.MaxX;
this.LimitMinY=0;
this.LimitMaxY=this.MaxY;
}
};
//总开关 开
this.Enable=function(){
this.clickObj.css("cursor","move"); //:move;cursor:default;
this.canBeDrap=true;
};
//总开关 关
this.Disable=function(){
this.clickObj.css("cursor","default"); //:move;cursor:default;
this.canBeDrap=false;
};
// 设有限
this.EnableLimit= function()
{
this.isLimit=true;
};
// 设无限
this.DisableLimit= function()
{
this.isLimit=false;
};
this.ObjMouseDown = function(ev)
{
if(_this.canBeDrap)
{
//动态添加 跟踪 函数
_this.MoveEvent.addEventHandler(document.body,"mousemove",_this.DocumentMouseMove);
//标记当前状态为 拖动状态
_this.IsDraping= true;
ev = ev || window.event; // 事件
//记录 //点下时的鼠标座标
_this.BeforeX=_this.lastX=_this.centerX = ev.clientX;
_this.BeforeY=_this.lastY=_this.centerY = ev.clientY;
//记录 差值：
_this.DiffX=ev.clientX-parseInt(_this.moveObj.css("left"));
_this.DiffY=ev.clientY-parseInt(_this.moveObj.css("top"));
_this.IsDraping=true;
//设定定时器跟综
if(_this.followTimer)
{
clearInterval(_this.followTimer);
}
_this.followTimer= setInterval(function(){
//跟综 函数
if(_this.canBeDrap)
{
//定位
_this.SetDivPoint();
}
},80);
//下面可以加下颜色 标记
}
};
//定位处理函数
this.SetDivPoint=function(){
//定位
if(this.BeforeX!=this.centerX )
{
if(this.isLimit)//是不是有限定
{
if((this.centerX-this.DiffX) <= this.LimitMinX)
{
this.moveObj.css("left",this.LimitMinX.toString()+"px");
}
else if(this.centerX-this.DiffX+this.width >= this.LimitMaxX)
{
this.moveObj.css("left",(this.LimitMaxX-this.width).toString()+"px");
}
else
{
this.moveObj.css("left",(this.centerX-this.DiffX).toString()+"px");
}
}
else
{
this.moveObj.css("left",(this.centerX-this.DiffX).toString()+"px");
}
}
if( this.BeforeY!=this.centerY)
{
if(this.isLimit)//是不是有限定
{
if(this.centerY-this.DiffY<=this.LimitMinY)
{
this.moveObj.css("top",this.LimitMinY.toString()+"px");
}
else if(this.centerY-this.DiffY+this.height>= this.LimitMaxY)
{
this.moveObj.css("top",(this.LimitMaxY-this.height).toString()+"px");
}
else
{
this.moveObj.css("top",(this.centerY-this.DiffY).toString()+"px");
}
}
else
{
this.moveObj.css("top",(this.centerY-this.DiffY).toString()+"px");
}
}
this.BeforeX=this.centerX;
this.BeforeY=this.centerY;
};
this.DocumentMouseUp=(function(that){
return (function(ev){
if(_this.IsDraping== false)
{
return;
}
//标记当前状态为 非拖动状态
_this.IsDraping= false;
if(that.followTimer)
{
clearInterval(that.followTimer);
that.followTimer=false;
}
if(_this.canBeDrap)
{
//定位
_this.SetDivPoint();
}
ev = ev || window.event; // 事件
_this.BeforeX=_this.centerX = ev.clientX;
_this.BeforeY=_this.centerY = ev.clientY;
//消息 跟踪 函数
_this.MoveEvent.removeEventHandler(document.body,"mousemove",_this.DocumentMouseMove);
});
})(this);
this.DocumentMouseMove = (function(that){
return (function(ev){
ev = ev || window.event; // 事件
that.centerX=ev.clientX;
that.centerY=ev.clientY;
});
})(this);
};
// 总开关默认值
_Drap.prototype.canBeDrap=true;
//标记 是不是正在拖动中
_Drap.prototype.IsDraping=false;
$(function(){
var dr = new _Drap("divClickTest","divMoveTest");
dr.F_Drap();
dr.Enable();
dr.EnableLimit();
dr.SetLimit(10,10,700,800);
});
</script>
</head>
<body>
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="divMoveTest">
<div id="divClickTest"></div>
</div>
</div>
</body>
</html>
但还需更完善。
明天推出吧。