http://www.jianshu.com/p/2a33d170d35a
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:300px;
height:300px;
background:#ccc;
position:relative;
left:200px;
top:200px;
}
.r,.t,.l,.b{
background:red;
position:absolute;
}
.r{
width:20px;
height:100%;
right:0;
top:0;
}
.l{
width:20px;
height:100%;
left:0;
top:0;
}
.t{
width:100%;
height:20px;
top:0;
left:0;
}
.b{
width:100%;
height:20px;
left:0;
bottom:0;
}
.lt,.rt,.lb,.rb{
width:20px;
height:20px;
position:absolute;
background:#399;
}
.lt{
left:0;
top:0;
}
.rt{
top:0;
right:0;
}
.lb{
left:0;
bottom:0;
}
.rb{
right:0;
bottom:0;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box'); //通过ID把父级元素获取到
var aDiv=oBox.children; //在父级元素下获取出来一级元素
for(var i=0; i<aDiv.length; i++){
drag(aDiv[i]); //通过循环给每一个元素加事件
};
function drag(obj){ //九宫格拖拽函数
//当鼠标按下时
obj.onmousedown=function(ev){
var oEvent=ev || event; //事件的兼容写法 ev(chrome FF IE9+) event(IE系 chrome)
//把需要的值都在按下时用变量存起来 用来移动时准备
var disX=oEvent.clientX; //按下时的横向坐标
var boxW=obj.parentNode.offsetWidth; //初始宽度
var left=obj.parentNode.offsetLeft; //初始left值
var disY=oEvent.clientY; //初始纵向坐标
var boxH=obj.parentNode.offsetHeight; //初始高度
var top=obj.parentNode.offsetTop;//初始top值
//当鼠标移动时
document.onmousemove=function(ev){
var oEvent=ev || event;
//判断obj中的className有没有我们要的方向 有的话返回的是1
//没有的话返回的是-1
//左
if(obj.className.indexOf('l')!=-1){
var targetX=disX-oEvent.clientX; //向左边拖的话是初始的坐标-移动完的坐标 得出一个移动的距离
var newW=boxW+targetX; //新的宽度=原来的宽度 +上移动的距离
var newL=left-targetX; // 新的left=原来的left-移动的距离
obj.parentNode.style.left=newL+'px'; //赋值 left
obj.parentNode.style.width=newW+'px'; //赋值 width
}
//其它几个方向都是一样的原理
//左边和下面就不用改变 left和top
//上
if(obj.className.indexOf('t')!=-1){
var targetY=disY-oEvent.clientY;
var newH=boxH+targetY;
var newT=top-targetY;
obj.parentNode.style.height=newH+'px';
obj.parentNode.style.top=newT+'px';
}
//右
if(obj.className.indexOf('r')!=-1){
var targetX=oEvent.clientX-disX;
var newW=targetX+boxW;
obj.parentNode.style.width=newW+'px'
}
//下
if(obj.className.indexOf('b')!=-1){
var targetY=oEvent.clientY-disY;
var newH=targetY+boxH;
obj.parentNode.style.height=newH+'px';
}
};
//当鼠标松开时
document.onmouseup=function(){
document.onmousemove=null;//清空鼠标移动时的事件
document.onmouseup=null;//清空鼠标按下时的事件
obj.releaseCapture && obj.releaseCapture();
};
obj.setCapture && obj.setCapture();
return false;//阻止浏览器默认行为
};
}
};
</script>
</head>
<body>
<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
```
![GIF.gif](http://upload-images.jianshu.io/upload_images/3932245-
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:300px;
height:300px;
background:#ccc;
position:relative;
left:200px;
top:200px;
}
.r,.t,.l,.b{
background:red;
position:absolute;
}
.r{
width:20px;
height:100%;
right:0;
top:0;
}
.l{
width:20px;
height:100%;
left:0;
top:0;
}
.t{
width:100%;
height:20px;
top:0;
left:0;
}
.b{
width:100%;
height:20px;
left:0;
bottom:0;
}
.lt,.rt,.lb,.rb{
width:20px;
height:20px;
position:absolute;
background:#399;
}
.lt{
left:0;
top:0;
}
.rt{
top:0;
right:0;
}
.lb{
left:0;
bottom:0;
}
.rb{
right:0;
bottom:0;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box'); //通过ID把父级元素获取到
var aDiv=oBox.children; //在父级元素下获取出来一级元素
for(var i=0; i<aDiv.length; i++){
drag(aDiv[i]); //通过循环给每一个元素加事件
};
function drag(obj){ //九宫格拖拽函数
//当鼠标按下时
obj.onmousedown=function(ev){
var oEvent=ev || event; //事件的兼容写法 ev(chrome FF IE9+) event(IE系 chrome)
//把需要的值都在按下时用变量存起来 用来移动时准备
var disX=oEvent.clientX; //按下时的横向坐标
var boxW=obj.parentNode.offsetWidth; //初始宽度
var left=obj.parentNode.offsetLeft; //初始left值
var disY=oEvent.clientY; //初始纵向坐标
var boxH=obj.parentNode.offsetHeight; //初始高度
var top=obj.parentNode.offsetTop;//初始top值
//当鼠标移动时
document.onmousemove=function(ev){
var oEvent=ev || event;
//判断obj中的className有没有我们要的方向 有的话返回的是1
//没有的话返回的是-1
//左
if(obj.className.indexOf('l')!=-1){
var targetX=disX-oEvent.clientX; //向左边拖的话是初始的坐标-移动完的坐标 得出一个移动的距离
var newW=boxW+targetX; //新的宽度=原来的宽度 +上移动的距离
var newL=left-targetX; // 新的left=原来的left-移动的距离
obj.parentNode.style.left=newL+'px'; //赋值 left
obj.parentNode.style.width=newW+'px'; //赋值 width
}
//其它几个方向都是一样的原理
//左边和下面就不用改变 left和top
//上
if(obj.className.indexOf('t')!=-1){
var targetY=disY-oEvent.clientY;
var newH=boxH+targetY;
var newT=top-targetY;
obj.parentNode.style.height=newH+'px';
obj.parentNode.style.top=newT+'px';
}
//右
if(obj.className.indexOf('r')!=-1){
var targetX=oEvent.clientX-disX;
var newW=targetX+boxW;
obj.parentNode.style.width=newW+'px'
}
//下
if(obj.className.indexOf('b')!=-1){
var targetY=oEvent.clientY-disY;
var newH=targetY+boxH;
obj.parentNode.style.height=newH+'px';
}
};
//当鼠标松开时
document.onmouseup=function(){
document.onmousemove=null;//清空鼠标移动时的事件
document.onmouseup=null;//清空鼠标按下时的事件
obj.releaseCapture && obj.releaseCapture();
};
obj.setCapture && obj.setCapture();
return false;//阻止浏览器默认行为
};
}
};
</script>
</head>
<body>
<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
```