注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

jiwenxu的博客

CODE

 
 
 

日志

 
 

拖动层  

2009-09-16 17:10:42|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<html>

  <head>

    <title>Drag 'n' Drop Demo</title>

<style type="text/css">

body{
 margin:0;
 padding:0;
 font-size:12px;
}

#inner  {
top:150px;
left:130px;
width:100px;
height:20px;
background-color:#fff0f0;
border:solid 1px #121212;
}

#inner1 {
 top:50px;
 left:30px; 
 width:100px;
 height:20px;
 background-color:#fff0f0;
 border:solid 1px #121212;
 }

#outer1{

position:absolute;
top:50px;
left:30px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}

#outer {
position:absolute;
top:150px;
left:130px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
</style>
</head>

<body>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

  var hen_move = {
    //移动对象
    obj:null,
    //触发对象
    drag:null,
    init:function(obj, drag,event){
this._x = this._y = 0;//记录鼠标相对拖放对象的位置
//boolean
this.flag=false;//通过此属性来判断是否可移动
this.obj = $(obj);
this.drag = $(drag);
this.obj.style.cursor = "move";
//this.obj.onmousedown=function(e){
hen_move.Start(window.event || event)
//};
document.onmousemove=function(e){hen_move.Move(window.event || e)};

document.onmouseup=function(e){hen_move.Stop(window.event || e)};
},

//准备拖动

  Start: function(oEvent) {
   this.flag = true;
//记录鼠标相对拖放对象的位置
this._x = oEvent.clientX -  this.drag.offsetLeft;
this._y = oEvent.clientY -  this.drag.offsetTop;
 },

  //拖动
  Move: function(oEvent) {
window.getSelection && window.getSelection().removeAllRanges();
   if(this.flag){
//当前鼠标位置减去相对拖放对象的位置得到offset位置
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
this.drag.style.left = iLeft   + "px";
this.drag.style.top = iTop  + "px";
}
  },

   //停止拖动
  Stop: function(oEvent) {
   this.flag = false;
   $("top1").value = this.drag.style.top;
   $("left1").value = this.drag.style.left;
  }
  };

</script>
 <div id="outer"  >
  <div id="inner" onmousedown="hen_move.init('inner','outer',event);">点击这里移动此层1</div>
 </div>
 <div id="outer1" >
  <div id="inner1" onmousedown="hen_move.init('inner1','outer1',event);">点击这里移动此层2</div>
 </div>
<p>如发现bug请联系或者留言
<table width="200" border="0">
  <tr>
    <td colspan="2">层1</td>
  </tr>
  <tr>
    <td>TOP</td>
    <td><input type="text" name="top1" id="top1" /></td>
  </tr>
  <tr>
    <td>LEFT</td>
    <td><input type="text" name="left1" id="left1" /></td>
  </tr>
  <tr>
    <td colspan="2">层2</td>
  </tr>
  <tr>
    <td>TOP</td>
    <td><input type="text" name="top2" id="top2" /></td>
  </tr>
  <tr>
    <td>LEFT</td>
    <td><input type="text" name="left2" id="left2" /></td>
  </tr>
</table>

</body>
</html>

  评论这张
 
阅读(149)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018