您的位置：首页 > Web前端 > JavaScript

js组件化 2 拖拽

2016-07-19 11:20 281 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
cursor: move;
position:absolute;
left:0;
top: 0;
}
#div2{
width: 100px;
height: 100px;
background: black;
cursor: move;
position:absolute;
left:100px;
top: 0;
}
#div3{
width: 100px;
height: 100px;
background: blue;
cursor: move;
position:absolute;
left:200px;
top: 0;
}
</style>
<script>

window.onload=function(){
var oDiv1=new Drag();
oDiv1.init({ id:'div1'});

var oDiv2=new Drag();
oDiv2.init({ id:'div2',fD:function(){ document.title="hi" }});

var oDiv3=new Drag();
oDiv3.init({
id:'div3',
fD:function(){
document.title='jerry'
},
fU:function(){
document.title='byebye'
}
});
}

function Drag(){ this.oDiv=null;this.disX=0;this.disY=0;this.settings={fD:function(){},fU:function(){} }};

Drag.prototype.init=function(opt){
var _this=this;
extend(this.settings,opt);
this.oDiv = document.getElementById(opt.id);
this.oDiv.onmousedown=function(ev){
var ev = ev||window.event;
_this.fnDown(ev);
_this.settings.fD();

document.onmousemove = function(ev){var ev=ev||window.event;_this.fnMove(ev);};
document.onmouseup = function(){_this.fnUp();_this.settings.fU();};
return false;
}
};
Drag.prototype.fnDown=function (ev){var ev=ev||window.event;this.disX=ev.clientX-this.oDiv.offsetLeft;this.disY=ev.clientY-this.oDiv.offsetTop;};

Drag.prototype.fnMove = function(ev){this.oDiv.style.left=ev.clientX-this.disX+'px';this.oDiv.style.top=ev.clientY-this.disY+'px';};

Drag.prototype.fnUp = function(){document.onmousedown=null;document.onmousemove=null;}

function extend(obj1,obj2){for (var i in obj2){ obj1[i]=obj2[i];}}

</script>

</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航