[javascript]互換性のある簡単なドラッグ
11531 ワード
すぐに仕事を探さなければならない、コンピュータの専門ではない、先端が大好きな四犬として、最近はデモを書いたり、本を読んだりするようになりました.
夜はjsを使って比較的に簡単な(low)の引っ張り効果を実現して、初歩的なテストの互換性はやはり悪くなくて、そこで1段の小さい博文を書いて記録しています.
プロセス指向の書き方
夜はjsを使って比較的に簡単な(low)の引っ張り効果を実現して、初歩的なテストの互換性はやはり悪くなくて、そこで1段の小さい博文を書いて記録しています.
プロセス指向の書き方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.onload = function (){
var disX = 0;
var disY = 0;
var oBox = document.getElementById("box");
oBox.onmousedown = function (ev){
var oEvent = ev || event;
oBox.style.cursor = "move";
disX = oEvent.clientX - oBox.offsetLeft;
disY = oEvent.clientY - oBox.offsetTop;
document.onmousemove = function (ev){
var oEvent = ev || event;
var theLeft = oEvent.clientX - disX;
var theTop = oEvent.clientY - disY;
//
if (theLeft < 0) {
theLeft = 0;
} else if (theLeft > document.documentElement.clientWidth-
oBox.offsetWidth) {
theLeft = document.documentElement.clientWidth-
oBox.offsetWidth;
} else if (theTop < 0) {
theTop = 0;
} else if (theTop > document.documentElement.clientHeight-
oBox.offsetHeight) {
theTop = document.documentElement.clientHeight-
oBox.offsetHeight;
}
oBox.style.left = theLeft + 'px';
oBox.style.top = theTop + 'px';
}
}
document.onmouseup = function (){
document.onmousemove =null;
}
//
window.onresize = function (){
oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px';
oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px';
}
// firefox 3.6.19
return false;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box,#box2 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<script>
window.onload = function (){
new Drag("box");
new Drag("box2");
}
function Drag(id){
var _this = this;
this.disX = 0;
this.disY = 0;
this.oBox = document.getElementById(id);
this.oBox.onmousedown = function (ev){
_this.fnDown(ev);
// firefox 3.6.19
return false;
};
document.onmouseup = function (){
_this.fnUp();
}
window.onresize = function (){
_this.fnResize();
};
// firefox 3.6.19
return false;
}
Drag.prototype.fnDown = function(ev){
var oEvent = ev || event;
var _this = this;
this.oBox.style.cursor = "move";
this.disX = oEvent.clientX - this.oBox.offsetLeft;
this.disY = oEvent.clientY - this.oBox.offsetTop;
document.onmousemove = function (ev){
_this.fnMove(ev);
};
}
Drag.prototype.fnMove = function(ev){
var oEvent = ev || event;
var theLeft = oEvent.clientX - this.disX;
var theTop = oEvent.clientY - this.disY;
//
if (theLeft < 0) {
theLeft = 0;
} else if (theLeft > document.documentElement.clientWidth-
this.oBox.offsetWidth) {
theLeft = document.documentElement.clientWidth-
this.oBox.offsetWidth;
}
if (theTop < 0) {
theTop = 0;
} else if (theTop > document.documentElement.clientHeight-
this.oBox.offsetHeight) {
theTop = document.documentElement.clientHeight-
this.oBox.offsetHeight;
}
this.oBox.style.left = theLeft + 'px';
this.oBox.style.top = theTop + 'px';
}
Drag.prototype.fnUp = function (){
document.onmousemove =null;
}
Drag.prototype.fnResize = function(){
this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px';
this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px';
}
</script>
</body>
</html>