您的位置：首页 > Web前端 > JQuery

JQUERY实现拖动层

2010-11-25 17:42 232 查看

刚出炉的大家需要的拿去用吧

var DragAndDrop = function() {
var _clientWidth;
var _clientHeight;
var _controlObj;
var _dragObj;
var _flag = false;
var _dragObjCurrentLocation;
var _mouseLastLocation;
var getElementDocument = function(element) {
//返回某元素的根元素
return element.ownerDocument || element.document
};
var dragMouseDownHandler = function(evt) {
if (_dragObj) {
evt = evt || window.event;
//获取浏览器宽
_clientWidth = document.body.clientWidth;
//获取浏览器高
_clientHeight = document.documentElement.scrollHeight;
_flag = true;
//定义结构体 保存当前left和TOP的值
_dragObjCurrentLocation = {
x: $(_dragObj).offset().left,
y: $(_dragObj).offset().top
};
//定义结构体 保存点击鼠标时的位置坐标
_mouseLastLocation = {
x: evt.screenX,
y: evt.screenY
};
//绑定事件
$(document).bind("mousemove", dragMouseMoveHandler);
$(document).bind("mouseup", dragMouseUpHandler);
//组织默认动作
if (evt.preventDefault) {
evt.preventDefault()
} else {
evt.returnValue = false
}
}
};
var dragMouseMoveHandler = function(evt) {
if (_flag) {
evt = evt || window.event;

var _mouseCurrentLocation = {
x: evt.screenX,
y: evt.screenY
};
_dragObjCurrentLocation.x = _dragObjCurrentLocation.x + (_mouseCurrentLocation.x - _mouseLastLocation.x);
_dragObjCurrentLocation.y = _dragObjCurrentLocation.y + (_mouseCurrentLocation.y - _mouseLastLocation.y);
_mouseLastLocation = _mouseCurrentLocation;
$(_dragObj).css("left", _dragObjCurrentLocation.x + "px");
$(_dragObj).css("top", _dragObjCurrentLocation.y + "px");
//组织默认动作
if (evt.preventDefault) {
evt.preventDefault()
} else {
evt.returnValue = false
}
}
};
var dragMouseUpHandler = function(evt) {
if (_flag) {
evt = evt || window.event;
cleanMouseHandlers();
_flag = false
}
};
var cleanMouseHandlers = function() {
if (_controlObj) {
$(_controlObj.document).unbind("mousemove");
$(_controlObj.document).unbind("mouseup")
}
};
return {
//注册事件
Register: function(dragObj, controlObj) {
_dragObj = dragObj;
_controlObj = controlObj;
$(_controlObj).bind("mousedown", dragMouseDownHandler)
}
}
} ();

使用方法

<mce:style><!--
.div{width:200px; height:150px; border:1px solid #ccc; margin:10px;position:absolute}
.cursor{cursor:move}
--></mce:style><style mce_bogus="1">.div{width:200px; height:150px; border:1px solid #ccc; margin:10px;position:absolute}
.cursor{cursor:move}</style>
<body>
<div class="div" id="msg1">
<div class="cursor" id="title">DIV层二</div>
<div id="biger" style="top: 130px; position:absolute; border:1px solid #e7e7e7; width:100%; cursor:nw-resize">123</div>
</div>

<mce:script type="text/javascript"><!--
var title=document.getElementById('title');
var msg1=document.getElementById('msg1');
DragAndDrop.Register(msg1,biger)
// --></mce:script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航