转载：一个封装好的拖动层效果

最新推荐文章于 2025-12-09 14:34:24 发布

转载最新推荐文章于 2025-12-09 14:34:24 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongwusan/archive/2008/10/31/1323535.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种封装的鼠标拖动层类，通过简单的JavaScript实现网页元素的拖拽功能。该类支持不同浏览器环境，提供了拖动入口、拖动初始化、清除拖动ID和拖动过程等核心功能。

<!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>
<style type="text/css">

</style>
<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");
}
</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;
  }
}
}
  </textarea>
</div>
<h2>
  使用方法
</h2>
<div class="preview">
  1.把以上代码引进你的页面 <script type="text/javascript" src="dragClass.js"></script><br/>
  2.在页面的"</body>"标签前加入以下代码:<br/>
  <div class="example">
   <script type="text/javascript"><br/>
   window.onload = function(){<br />
var c = new dragClass();//创建对象<br />
c.dragStar("拖动id","移动层id");<br />
}<br/>
   </script>
  </div>
  其中sd方法中的参数为:<br/>
   参数一 "拖动id":鼠标经过时候鼠标样式变成移动样式模样的元素的id<br/>
   参数二 "移动层id":即将移动的元素的id<br/>
  <span class="red">3.建议移动层是绝对定位(position:absolute;).</span>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/10/31/1323535.html