要件：ズームイン/アウト、親要素のサイズを超えることはできません、親要素の子要素が出て取得することはできませんドラッグイベントバブルを防ぎます
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字セット= "UTF-8">
<タイトル> </ TITLE>
<スタイル>
* {マージン：0;パディング：0 ;}
.box1 {ボーダー：10pxの固体＃ 000、幅400ピクセル、高さ400ピクセル;位置：相対;マージン：0 自動;}
.box2 {位置：絶対;幅：80px;高さ：80px;背景：金;上部： 0;左：0 ;}
.box3 {位置：絶対;幅：10pxの;高さ：10pxの;右： -5px;底：-5px;背景：＃1 0000FF;ボーダー半径：50％;}
</スタイル>
</ head>
<body>
<DIVクラス= "BOX1">
<DIV CLASS = "BOX2">
<DIV CLASS = "BOX3"> </ DIV>
</ DIV>
</ DIV>
<スクリプトタイプ= "テキスト/ javascriptの">
VaRの BOX1 = document.querySelector（」BOX1" 。）;
VaRの BOX2 = document.querySelector（」BOX2" 。）;
VaRの BOX3 = document.querySelector（」BOX3" 。）;
box1.onmousedown = 関数（E）{
E = E || window.event;
VaRの左= box2.offsetLeft。
VaRのトップ= box2.offsetTop。
VAR nowX = e.clientX。
VARノヴィ= e.clientY。
document.onmousemove = 関数（E）{
VARの resultX =左+ e.clientX - nowX。
VAR resultY =トップ+ e.clientY - ノヴィ。
もし（resultX <0 ）{
resultX = 0 。
} そう であれば（resultX> box1.clientWidth - box2.offsetWidth）{
resultX = box1.clientWidth - box2.offsetWidth
}
もし（resultY <0 ）{
resultY = 0 。
} そう であれば（resultY> box1.clientHeight - box2.offsetHeight）{
resultY = box1.clientHeight - box2.offsetHeight
}
box2.style.left = resultX + "PX" 。
box2.style.top = resultY + "ピクセル"。
}
}
box3.onmousedown = 関数（E）{
E = E || window.event;
e.stopPropagation（）;
e.cancelBubble = 真;
VaRの幅= box2.offsetWidth。
VaRの高さ= box2.offsetHeight。
VAR nowX = e.clientX。
VARノヴィ= e.clientY。
document.onmousemove = 関数（E）{
E = E || window.event;
するvar A =幅+ e.clientX - nowX。
VaRの B =高さ+ e.clientY - ノヴィ。
もし（> box1.clientWidth）{
A = box1.clientWidth。
}
もし、（B> {box1.clientHeight）
B = box1.clientHeight。
}
box2.style.width = A + "PX"
box2.style.height = B + "PX" 。
}
}
document.onmouseup = 関数（）{
document.onmousemove = NULL ;
}
</ SCRIPT>
</ body>
</ HTML>