繼承函數(shù) DragBox
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#box2 {
background: green;
}
#box3 {
background: blue;
}
*{margin:0;padding:0}
body{height: 100vh}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="DragBox.js"></script>
<script>
/*
DragBoxText 繼承 DragBox
需要在繼承的基礎(chǔ)上锌畸，實(shí)現(xiàn)在移動(dòng)時(shí)，顯示自己的坐標(biāo)
步驟：
1. 繼承屬性
2. 繼承方法
3. 修改 move 方法
【練習(xí)】 你實(shí)現(xiàn)繼承的 DragBoxText
*/
function DragBoxText(boxId){
DragBox.call(this,boxId)
}
DragBoxText.prototype = new DragBox()
DragBoxText.prototype.move = function(x,y){
DragBox.prototype.move.call(this,x,y)
this.ele.innerHTML = x +","+ y
}
DragBox2.prototype = new DragBox()
function DragBox2(boxId){
DragBox.call(this,boxId)
}
DragBox2.prototype.move = function(x,y){
if (x<0)
{
x=0
}else if (x>document.body.clientWidth-this.ele.offsetWidth)
{
x = document.body.clientWidth-this.ele.offsetWidth
}
if (y<0)
{
y=0
}else if (y>document.body.clientHeight-this.ele.offsetHeight)
{
y = document.body.clientHeight-this.ele.offsetHeight
}
DragBox.prototype.move.call(this,x,y)
}
// 讓 box1 具備拖拽的能力
new DragBox("box1");
new DragBoxText("box2");
new DragBox2("box3");
</script>
遇到的問(wèn)題
1.獲取屏幕高度
應(yīng)該先給body設(shè)置高度
如： body{ height: 100vh} (vh表示百分比)
