小編給大家分享一下JS面向對象編程實現的拖拽功能案例詳解，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體如下：
原始的面向過程代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#box {
width: 100px;
height: 100px;
background: blue;
position: absolute;
}
</style>
<title>拖拽</title>
<script>
var oBox=null;
var disX=0;
var disY=0;
window.onload=function(){
oBox=document.getElementById('box');
oBox.onmousedown=fnDown;
};
//鼠標按下事件
function fnDown(ev){
var oEvent = ev||event;
disX = oEvent.clientX - oBox.offsetLeft;
disY = oEvent.clientY - oBox.offsetTop;
document.onmousemove = fnMove;
document.onmouseup = fnUp;
}
//鼠標移動事件
function fnMove(ev){
var oEvent=ev||event;
oBox.style.left = oEvent.clientX - disX + 'px';
oBox.style.top = oEvent.clientY - disY + 'px';
}
//鼠標抬起事件
function fnUp(){
document.onmousemove = null;
document.onmouseup = null;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>下面是面向對象的代碼
drag.js
/**
* 拖拽
* @param {Object} id div的id
*/
function Drag(id){
this.oBox = document.getElementById(id);
this.disX = 0;
this.disY = 0;
var _this = this;
this.oBox.onmousedown = function(){
_this.fnDown();
}
}
//鼠標按下
Drag.prototype.fnDown = function(ev){
var oEvent = ev || event;
this.disX = oEvent.clientX - this.oBox.offsetLeft;
this.disY = oEvent.clientY - this.oBox.offsetTop;
var _this = this;
document.onmousemove = function(){
_this.fnMove();
};
document.onmouseup = function(){
_this.fnUp();
};
}
//鼠標移動
Drag.prototype.fnMove = function(ev){
var oEvent= ev || event;
this.oBox.style.left = oEvent.clientX - this.disX + 'px';
this.oBox.style.top = oEvent.clientY - this.disY + 'px';
}
//鼠標抬起
Drag.prototype.fnUp = function(){
document.onmousemove = null;
document.onmouseup = null;
}drag.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
position: absolute;
}
</style>
<title>拖拽</title>
<script type="text/javascript" src="../js/drag.js" ></script>
<script>
window.onload = function(){
var drag1 = new Drag("box1");
var drag1 = new Drag("box2");
};
</script>
</head>
<body>
<div id="box1" ></div>
<div id="box2" ></div>
</body>
</html>
此拖拽有一個問題，就是沒有控制拖拽出邊界的問題。但我們又不想去修改代碼，那我們怎么做？學過java的應該都知道可以寫一個子類來做一些更加具體的操作，又保留了父類的功能，就是繼承。
html
<script type="text/javascript" src="../js/drag.js" ></script>
<script type="text/javascript" src="../js/dragLimit.js" ></script>
<script>
window.onload = function(){
var drag1 = new Drag("box1");
var drag1 = new DragLimit("box2");//藍色是不會超出邊界的
};
</script>
<body>
<div id="box1" ></div>
<div id="box2" ></div>
</body>DragLimit.js：DragLimit繼承自Drag，控制了不能出邊界
/**
* 限制邊界的拖拽，繼承自Drag
* @param {Object} id
*/
function DragLimit(id){
Drag.call(this, id);
}
//繼承方法
for(var p in Drag.prototype){
DragLimit.prototype[p] = Drag.prototype[p];
}
/**
* 覆寫父類的鼠標移動方法，控制不能移出邊界
*/
DragLimit.prototype.fnMove = function(ev){
var oEvent= ev || event;
var left = oEvent.clientX - this.disX;
var top = oEvent.clientY - this.disY;
//控制邊界
if(left < 0){
left = 0;
} else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
left = document.documentElement.clientWidth-this.oBox.offsetWidth;
}
if(top <= 0){
top = 0;
} else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
top = document.documentElement.clientHeight-this.oBox.offsetHeight;
}
this.oBox.style.left = left + 'px';
this.oBox.style.top = top + 'px';
}以上是“JS面向對象編程實現的拖拽功能案例詳解”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
