最近在做个页面，需要首页模块可拖动并且编辑大小，首页用到的基本上是div标签，
由于个人不是搞前端的，js真心不是很熟~~~，网上搜索了一些资料，基本上都不完整，都有一定的缺少部分！
于是自己结合网上的多篇资料，整合了一份，可以div拖动改变大小的html代码例子，有这方面需要的可以参考下：
以下是效果图：
Html代码如下（直接复制保存为html文件即可运行）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖动事件</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.s-move-content-outer{border:1px black solid;width:200px;height:200px;position:relative;outline:none;user-select:none;/*overflow:hidden;*/;}
.s-move-content-outer:focus .s-show{display:block;}
/* 移动 */
.s-move-content-header{background-color:pink;width:100%;height:30px;text-align:center;line-height:30px;}
.s-move-content-header:focus .s-show{display:block;}
/* 八个方位的div控制 */
.s-move-content-direction{width:5px;height:5px;border:1px black solid;background-color:gray;position:absolute;display:none;}
/* 八个方位的小手各自的div */
.s-move-content-direction-n{cursor:n-resize;left:50%;top:-7px;margin-left:-4px;}
.s-move-content-direction-ne{cursor:ne-resize;top:-7px;right:-7px;}
.s-move-content-direction-e{cursor:e-resize;top:50%;right:-7px;margin-top:-4px;}
.s-move-content-direction-se{cursor:se-resize;bottom:-7px;right:-7px;}
.s-move-content-direction-s{cursor:s-resize;bottom:-7px;left:50%;margin-left:-4px;}
.s-move-content-direction-sw{cursor:sw-resize;left:-7px;bottom:-7px;}
.s-move-content-direction-w{cursor:w-resize;left:-7px;top:50%;margin-top:-4px;}
.s-move-content-direction-nw{cursor:nw-resize;left:-7px;top:-7px;}
</style>
</head>
<body>
<div class="s-move-content-outer" tabIndex="1" >
<div class="s-move-content-header" tabIndex="1" >div1
<div class="s-move-content-direction s-show s-move-content-direction-n"></div>
<div class="s-move-content-direction s-show s-move-content-direction-ne"></div>
<div class="s-move-content-direction s-show s-move-content-direction-e"></div>
<div class="s-move-content-direction s-show s-move-content-direction-se"></div>
<div class="s-move-content-direction s-show s-move-content-direction-s"></div>
<div class="s-move-content-direction s-show s-move-content-direction-sw"></div>
<div class="s-move-content-direction s-show s-move-content-direction-w"></div>
<div class="s-move-content-direction s-show s-move-content-direction-nw"></div>
</div>
<div>内容1</div>
</div>
<div class="s-move-content-outer" tabIndex="1" >
<div class="s-move-content-header" tabIndex="1" >div2
<div class="s-move-content-direction s-show s-move-content-direction-n"></div>
<div class="s-move-content-direction s-show s-move-content-direction-ne"></div>
<div class="s-move-content-direction s-show s-move-content-direction-e"></div>
<div class="s-move-content-direction s-show s-move-content-direction-se"></div>
<div class="s-move-content-direction s-show s-move-content-direction-s"></div>
<div class="s-move-content-direction s-show s-move-content-direction-sw"></div>
<div class="s-move-content-direction s-show s-move-content-direction-w"></div>
<div class="s-move-content-direction s-show s-move-content-direction-nw"></div>
</div>
<div>内容2</div>
</div>
</body>
</html>
<script>
//监控页面上所有div点击事件
var $BIPanel = $("div[class^='s-move-content-outer']").mousedown(function(e) {
var ele = $(this);
document.onmousemove = function(e){
addMoveContentControl(ele[0],e);
}
});
var space = {
move : { // [移动]
content : { // [移动备注框]
width : 200, // 默认div的宽度
height : 200, // 默认div的高度
top : 0 , // 默认div的距离头部距离
right : 0 , // 默认div的距离右侧距离
bottom : 0 , // 默认div的距离底部距离
left : 0 , // 默认div的距离左侧距离
moveHeight : 30 , // 默认头部高度
textareaHeight : 170, // 默认textarea的高度
min : 100 , // div宽度高度不能小于min
buttomTarget : null, // 鼠标按下之后的target
moveTarget : null // 鼠标按下之后移动的target
}
}
}
/**
* @para divEle 最大的div
* @para e 鼠标事件
*/
function addMoveContentSuper(divEle,e){
// 缩小保护
this.min = space.move.content.min;
// 所有元素
this.divEle = divEle;
this.textEle = divEle.lastElementChild; // testArea element
// 最大div的style
this.divStyle = this.divEle.style;
this.divWidth = this.divStyle.width;
this.divHeight = this.divStyle.height;
this.divTop = this.divStyle.top;
this.divRight = this.divStyle.right;
this.divBottom = this.divStyle.bottom;
this.divLeft = this.divStyle.left;
// 头部移动高度
this.hreadHeight = space.move.content.moveHeight;
// textarray的style
this.textStyle = this.textEle.style;
// 鼠标事件event
this.e = e;
this.x = e.movementX;
this.y = e.movementY;
this.moveTarget = space.move.content.moveTarget; // 正在移动的target
// 修改属性的值
// [这里以后就不用再if判断了,就连html里的标签都是js生成的直接用js赋值宽度就行]
this.divWidth = (this.divWidth === "") ?
space.move.content.width : parseInt(this.divWidth.replace("px",""));
this.divHeight = (this.divHeight === "") ?
space.move.content.height : parseInt(this.divHeight.replace("px",""));
this.divTop = (this.divTop === "") ?
space.move.content.top : parseInt(this.divTop.replace("px",""));
this.divRight = (this.divRight === "") ?
space.move.content.right : parseInt(this.divRight.replace("px",""));
this.divBottom = (this.divBottom === "") ?
space.move.content.bottom : parseInt(this.divBottom.replace("px",""));
this.divLeft = (this.divLeft === "") ?
space.move.content.left : parseInt(this.divLeft.replace("px",""));
}
/**
* 添加移动框的 移动 && 放大 && 缩小 && 斜拉
*
* 元素组织最大一层 div → 移动层 → 八个小方位
* ↓
* textarea
* @param {[divElement]} divEle [需要移动的div,最外层的div]
* @param {[EventObject]} e [event type='move']
* @return {[void]}
*/
function addMoveContentControl(divEle,e){
if(e.buttons !== 1){ // 当鼠标没有按下则不走方法
space.move.content.moveTarget = null;
return;
}else if(space.move.content.moveTarget === null){ // 当鼠标按下了,movetarget为空则赋值
space.move.content.moveTarget = e.target; // 这里利用了成员变量
}
var move = divEle; // 获取移动元素
var direction = divEle.getElementsByClassName("s-move-content-direction"); // 获取所有拉伸的节点
switch(space.move.content.moveTarget){
case move : new addMoveContentMove(divEle,e,move); break; // 头部移动
case direction[0] : new addMoveContentTop(divEle,e,direction[0]); break; // 上拉伸
case direction[1] : new addMoveContentRightTop(divEle,e,direction[1]); break; // 右上拉伸
case direction[2] : new addMoveContentRight(divEle,e,direction[2]); break; // 右拉伸
case direction[3] : new addMoveContentRightButtom(divEle,e,direction[3]); break; // 右下拉伸
case direction[4] : new addMoveContentButtom(divEle,e,direction[4]); break; // 下拉伸
case direction[5] : new addMoveContentLeftButtom(divEle,e,direction[5]); break; // 左下拉伸
case direction[6] : new addMoveContentLeft(divEle,e,direction[6]); break; // 左上拉伸
case direction[7] : new addMoveContentLeftTop(divEle,e,direction[7]); break; // 左上拉伸
default : new addMoveContentMove(divEle,e,move); break;
}
}
function addMoveContentMove(divEle,e,thisEle){ // 移动
addMoveContentSuper.apply(this,arguments);
var top = this.divTop + this.y;
var left = this.divLeft + this.x;
this.divStyle.top = top + "px";
this.divStyle.left = left + "px";
}
function addMoveContentTop(divEle,e,thisEle){ // 向上拉伸
addMoveContentSuper.apply(this,arguments);
var top = this.divTop;
var height = this.divHeight + (-this.y);
if(height < this.min)
height = this.min;
else
top = this.divTop + this.y;
this.divStyle.top = top + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
function addMoveContentRightTop(divEle,e,thisEle){ // 右上拉伸
addMoveContentSuper.apply(this,arguments);
var top = this.divTop;
var width = this.divWidth + this.x;
var height = this.divHeight + (-this.y);
if(height < this.min)
height = this.min;
if(width < this.min)
width = this.min;
else
top = this.divTop + this.y;
this.divStyle.top = top + "px";
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
function addMoveContentRight(divEle,e,thisEle){ // 右侧拉伸
addMoveContentSuper.apply(this,arguments);
var width = this.divWidth + this.x;
if(width < this.min)
width = this.min;
this.divStyle.width = width + "px";
}
function addMoveContentRightButtom(divEle,e,thisEle){ // 右下拉伸
addMoveContentSuper.apply(this,arguments);
var width = this.divWidth + this.x;
var height = this.divHeight + this.y;
if(height < this.min)
height = this.min;
if(width < this.min)
width = this.min;
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
function addMoveContentButtom(divEle,e,thisEle){ // 向下拉伸
addMoveContentSuper.apply(this,arguments);
var height = this.divHeight + this.y;
if(height < this.min)
height = this.min;
this.textStyle.height = (height - this.hreadHeight) + "px";
this.divStyle.height = height + "px";
}
function addMoveContentLeftButtom(divEle,e,thisEle){ // 左下拉伸
addMoveContentSuper.apply(this,arguments);
var left = this.divLeft;
var width = this.divWidth + (-this.x);
var height = this.divHeight + this.y;
if(height < this.min)
height = this.min;
if(width < this.min)
width = this.min;
else
left = this.divLeft + this.x;
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.divStyle.left = left + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
function addMoveContentLeft(divEle,e,thisEle){ // 向左拉伸
addMoveContentSuper.apply(this,arguments);
var left = this.divLeft;
var width = this.divWidth + (-this.x);
if(width < this.min)
width = this.min;
else
left = this.divLeft + this.x;
this.divStyle.left = left + "px";
this.divStyle.width = width + "px";
}
function addMoveContentLeftTop(divEle,e,thisEle){ // 左上拉伸
addMoveContentSuper.apply(this,arguments);
var top = this.divTop;
var left = this.divLeft;
var width = this.divWidth + (-this.x);
var height = this.divHeight + (-this.y);
if(height < this.min)
height = this.min;
else
top = this.divTop + this.y;
if(width < this.min)
width = this.min;
else
left = this.divLeft + this.x;
this.divStyle.top = top + "px";
this.divStyle.left = left + "px";
this.divStyle.width = width + "px";
this.divStyle.height = height + "px";
this.textStyle.height = (height - this.hreadHeight) + "px";
}
</script>
