在JavaScript中我們接觸過面向過程的編程思想，比如叢林中三只螢火蟲在隨意飛翔谅阿，對(duì)于這種動(dòng)畫效果半哟，我們知道了它具有的元素和飛翔過程，依序去創(chuàng)建元素签餐，然后給元素加動(dòng)畫效果寓涨。然而在編程中，還有一種非常重要的思想氯檐，在今后的編程中會(huì)經(jīng)常用到戒良，那就是面向?qū)ο?/strong>的編程思想。
接下來就用拖拽案例來說明一下冠摄，要達(dá)到如下效果：
1.第一個(gè)box能夠在頁面上隨意拖拽
2.第二個(gè)box能夠在頁面上隨意拖拽的同時(shí)內(nèi)部顯示位置坐標(biāo)
3.第三個(gè)box能夠在頁面上隨意拖拽但不能夠越出頁面邊界
在開始代碼前糯崎，提個(gè)函數(shù)屬性几缭，在js中每一個(gè)函數(shù)都有prototype屬性，指向一個(gè)對(duì)象拇颅。而且prototype屬性對(duì)于構(gòu)造函數(shù)有很大的用處奏司，尤其在接下來的案例分享中它發(fā)揮著關(guān)鍵作用。再者就是繼承思想樟插，原型對(duì)象具有的屬性韵洋，后面的對(duì)象也會(huì)具有，并且還具有其他方法黄锤。
先來看下html結(jié)構(gòu)搪缨、css布局，這兩塊不難吧鸵熟！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽-原型對(duì)象</title>
<style type="text/css">
/* css布局如下 */
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
position: absolute;
color: #ffffff;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
#box3 {
background: purple;
}
</style>
</head>
<body>
<!--三個(gè)box元素-->
<div class="box" id="box1">a</div>
<div class="box" id="box2">b</div>
<div class="box" id="box3">c</div>
</body>
</html>
在實(shí)現(xiàn)對(duì)第一個(gè)box的拖拽前副编，封裝一個(gè)普通拖拽函數(shù)。DragBox.js代碼入下：
function DragBox(boxId) {
//判斷一下傳入的對(duì)象元素流强，是否定義
if (boxId == undefined) {
return;
}
// 屬性痹届，獲取節(jié)點(diǎn)元素
this.ele = document.getElementById(boxId);
console.log(this.ele); //可以查看是否為對(duì)象
var self = this;
// 因?yàn)槲矬w一開始創(chuàng)建就具有拖拽的能力，所以打月，一開始就進(jìn)行鼠標(biāo)按下的設(shè)置
this.ele.onmousedown = function (e) {
e.preventDefault(); // 阻止默認(rèn)事件發(fā)生
self.detaX = e.clientX - self.ele.offsetLeft;
self.detaY = e.clientY - self.ele.offsetTop;
// 開始
self.start();
// 停止
document.onmouseup = function () {
self.stop();
}
}
}
// 給構(gòu)建函數(shù)的的原型添加方法 1： 控制開始
DragBox.prototype.start = function () {
var self = this;
document.onmousemove = function (e) {
var x = e.clientX - self.detaX;
var y = e.clientY - self.detaY;
self.move(x, y)
}
}
// 給構(gòu)建函數(shù)的的原型添加方法 2： 控制移動(dòng)
DragBox.prototype.move = function(x, y) {
var self = this;
self.ele.style.left = x + "px";
self.ele.style.top = y + "px";
}
// 給構(gòu)建函數(shù)的的原型添加方法 3： 控制停止
DragBox.prototype.stop = function () {
document.onmousemove = null;
}
不知看到這里队腐，你們明白了多少∽喔荩可以調(diào)用函數(shù)來測試普通的拖拽效果柴淘。
new DragBox("box1"); // new 方法調(diào)用函數(shù)，box1可以實(shí)現(xiàn)拖拽
接下來應(yīng)用原型和繼承思想秘通，實(shí)現(xiàn)box2的效果：
<script>
// box2里加運(yùn)動(dòng)的坐標(biāo)
function DragBoxT(BoxId) {
//回調(diào)DragBox函數(shù)
DragBox.call(this, BoxId);
}
// 構(gòu)造拖拽函數(shù)后原型繼承普通拖拽函數(shù)
DragBoxT.prototype = new DragBox();
console.log(DragBoxT.prototype);
DragBoxT.prototype.move = function (x, y) {
DragBox.prototype.move.call(this, x, y);
// 給當(dāng)前拖拽元素增加位置坐標(biāo)的內(nèi)容
this.ele.innerHTML = x + "," + y;
}
new DragBoxT("box2");
</script>
最后为严，來實(shí)現(xiàn)box3的效果：
<script>
// box3 不出頁面邊界
function DragBoxNoOut(BoxId) {
DragBox.call(this, BoxId);
}
DragBoxNoOut.prototype = new DragBox();
DragBoxNoOut.prototype.move = function (x, y) {
// 判斷x，y距離值和邊界限定值的大小關(guān)系肺稀，阻止越界
if (x < 0) {
x = 0;
} else if (x > 1200) {
x = 1200;
}
if (y < 0) {
y = 0;
} else if (y > 500) {
y = 500;
}
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
}
new DragBoxNoOut("box3");
</script>
寫在最后第股，看到這里，整個(gè)拖拽案例的分享就結(jié)束了话原。是不是很神奇卻又一臉懵逼炸茧。原型思想和繼承思想還要多加理解，多用案例進(jìn)行切實(shí)操練稿静。
