<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.οnmοusedοwn=function(e){
hen_move.Start(window.event || event)
//};
document.οnmοusemοve=function(e){hen_move.Move(window.event || e)};
document.οnmοuseup=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" οnmοusedοwn="hen_move.init('inner','outer',event);">点击这里移动此层1</div>
</div>
<div id="outer1" >
<div id="inner1" οnmοusedοwn="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>
扫一扫
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
