JavaScript拖动层

<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;

 

  }

  };

 

</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请联系或者留言

<br>email:libinwalan@gmail.com<br>blog:<a href="www.myhen.cn" target="blank">myhen.cn</a></div>

  </body>

  

 

</html>