JS_拖动_一个封装好的拖动层效果
2009-04-02 22:56
399 查看
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标拖动层JS</title>
<mce:style type="text/css"><!--
body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}
.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}
.t_rt{text-align:right;}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}
ul,li{margin:0px;padding:0px;}
li{list-style-type:none;}
h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}
.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
h2{margin:0px 10px;background:#ccc;padding:5px;}
.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}
.authorInfo{width:760px; margin:10px auto 10px;text-align:center;}
.c_666{color:#666;}
.red{color:red;}
.scrolldoorFrame{width:600px;border:1px solid #FFF;margin:0px auto;overflow:hidden;position:relative;height:400px;}
.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}
.scrollUl li{float:left;}
.bor03{border:1px solid #ccc;border-top-width:0px;}
.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}
.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}
--></mce:style><style type="text/css" mce_bogus="1">body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}
.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}
.t_rt{text-align:right;}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}
ul,li{margin:0px;padding:0px;}
li{list-style-type:none;}
h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}
.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
h2{margin:0px 10px;background:#ccc;padding:5px;}
.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}
.authorInfo{width:760px; margin:10px auto 10px;text-align:center;}
.c_666{color:#666;}
.red{color:red;}
.scrolldoorFrame{width:600px;border:1px solid #FFF;margin:0px auto;overflow:hidden;position:relative;height:400px;}
.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}
.scrollUl li{float:left;}
.bor03{border:1px solid #ccc;border-top-width:0px;}
.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}
.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}</style>
<mce:script type="text/javascript"><!--
function dragClass(){
this.mouseState = document.all ? 1 : 0 ;
this.x;
this.y;
this.dragId = null;
this.index = 100;
document.onselectstart = function(){return false;};
}
dragClass.prototype = {
dragStar:function(dragId,moveId){//拖动入口函数
var _this = this;
_this.$(dragId).style.cursor = "move";
_this.$(dragId).onmousedown = function(e){
var e = e ? e : event;
//_this.$(moveId).style.zIndex = _this.index++;
if(e.button == _this.mouseState)
{
_this.setDragInfo(e,moveId,moveId);
_this.dragPro(moveId);
}
},
_this.$(moveId).onmousedown = function(e){
_this.$(moveId).style.zIndex = _this.index++;
},
_this.$(dragId).onmouseup = function(){
_this.clearDragId();
}
document.onmouseup = function(){
_this.clearDragId();
}
},
setDragInfo:function(e,dragId,moveId){//拖动初始化
this.x = e.clientX;
this.y = e.clientY;
this.dragId = dragId;
if(this.$(moveId).style.position != "absolute")
{
this.$(moveId).style.width = this.$(moveId).offsetWidth;
this.$(moveId).style.height = this.$(moveId).offsetHeight;
this.$(moveId).style.position = "absolute";
this.$(moveId).style.left = this.$(moveId).offsetLeft;
this.$(moveId).style.top = this.$(moveId).offsetTop;
}
},
clearDragId:function(){ //清除拖动ID
this.dragId = null;
},
dragPro:function(moveId){
var _this = this;
document.onmousemove = function(e){
var e = e ? e : event;
if(e.button == _this.mouseState && _this.dragId != null)
{
var x = e.clientX;
var y = e.clientY;
_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
_this.x = x;
_this.y = y;
//alert(_this.$(dragId).style.left);
}
}
},
$:function(o){//获取对象
if(typeof(o) == "string")
{
if(document.getElementById(o))
{
return document.getElementById(o);
}
else
{
alert("errId /""+ o + "/"!");
return false;
}
}
else
{
return o;
}
}
}
window.onload = function(){
var c = new dragClass();
c.dragStar("b","a");
c.dragStar("d","c");
}
// --></mce:script>
</head>
<body>
<div class="bodyer">
<h1 class="t_rt">
鼠标拖动层封装类
</h1>
<h2>
效果预览
</h2>
<div class="preview">
<div class="scrolldoorFrame">
<div id="a" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
<div id="b" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">
拖动层1
</div>
移动层
</div>
<div id="c" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
<div id="d" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">
拖动层2
</div>
移动层
</div>
</div>
</div>
<h2>
源代码
</h2>
<div class="textDiv">
<textarea id="sourse">
function dragClass(){
this.mouseState = document.all ? 1 : 0 ;
this.x;
this.y;
this.dragId = null;
this.index = 100;
document.onselectstart = function(){return false;};
}
dragClass.prototype = {
dragStar:function(dragId,moveId){//拖动入口函数
var _this = this;
_this.$(dragId).onmousedown = function(e){
var e = e ? e : event;
if(e.button == _this.mouseState)
{
_this.setDragInfo(e,moveId,moveId);
_this.dragPro(moveId);
}
}
_this.$(dragId).onmouseup = function(){
_this.clearDragId();
}
document.onmouseup = function(){
_this.clearDragId();
}
},
setDragInfo:function(e,dragId,moveId){//拖动初始化
this.x = e.clientX;
this.y = e.clientY;
this.dragId = dragId;
if(this.$(moveId).style.position != "absolute")
{
this.$(moveId).style.width = this.$(moveId).offsetWidth;
this.$(moveId).style.height = this.$(moveId).offsetHeight;
this.$(moveId).style.position = "absolute";
this.$(moveId).style.left = this.$(moveId).offsetLeft;
this.$(moveId).style.top = this.$(moveId).offsetTop;
}
this.$(moveId).style.zIndex = this.index++;
},
clearDragId:function(){ //清除拖动ID
this.dragId = null;
},
dragPro:function(moveId){
var _this = this;
document.onmousemove = function(e){
var e = e ? e : event;
if(e.button == _this.mouseState && _this.dragId != null)
{
var x = e.clientX;
var y = e.clientY;
_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
_this.x = x;
_this.y = y;
//alert(_this.$(dragId).style.left);
}
}
},
$:function(o){//获取对象
if(typeof(o) == "string")
{
if(document.getElementById(o))
{
return document.getElementById(o);
}
else
{
alert("errId /""+ o + "/"!");
return false;
}
}
else
{
return o;
}
}
}使用方法
1.把以上代码引进你的页面 <script type="text/javascript" src="dragClass.js"></script>2.在页面的"</body>"标签前加入以下代码:
<script type="text/javascript">
window.onload = function(){
var c = new dragClass();//创建对象
c.dragStar("拖动id","移动层id");
}
</script>
其中sd方法中的参数为:
参数一 "拖动id":鼠标经过时候鼠标样式变成移动样式模样的元素的id
参数二 "移动层id":即将移动的元素的id
3.建议移动层是绝对定位(position:absolute;).
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个js封装的不错的选项卡效果代码
- js实现一个可以兼容PC端和移动端的div拖动效果
- js实现一个可以兼容PC端和移动端的div拖动效果实例
- 封装的一个JS拖拽效果,兼容所有主流浏览器
- 一个封装了的选项卡效果js
- 转载一个js实现div拖动效果
- 一个封装了的选项卡效果js
- 转载：一个封装好的拖动层效果
- js实现一个可以兼容PC端和移动端的div拖动效果
- js实现一个可以兼容PC端和移动端的div拖动效果实例
- js实现一个可以兼容PC端和移动端的div拖动效果
- 封装的一个JS跟随鼠标效果
- 一个js封装的不错的选项卡效果代码
- 自己封装的一个原生JS拖动方法(推荐)
- 自己封装的一个原生JS拖动方法。
- 封装了一个js图片轮换效果的函数
- 一个封装了的选项卡效果js
- 封装了一个js图片轮换效果的函数
- 一个封装了的选项卡效果js
- JavaScript 封装一个tab效果源码分享