html 拉伸幕,html 对 div 进行 拉伸 拖拽

火狐浏览器支持不好 , ie不能用.....谷歌最好

代码也有bug,快速操作的时候会出现小浮动的偏移 , 不能两个一块拖动

在网上看到有这个功能就自己写了一个,写的不好有简单的方法可以留言指正谢谢!

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

拖动事件

.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;cursor:move;}

.s-move-content-header:focus .s-show{display:block;}

/* 内容 */

.s-move-content-content{font-family:华文行楷;width:100%;height:100%;background-color:red;}

/* 八个方位的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;}

请移动我

var ele = document.getElementsByClassName("s-move-content-outer")[0];

//var ele1 = document.getElementsByClassName("s-move-content-outer")[1];

document.onmousemove = function(e){

addMoveContentControl(ele,e);

//addMoveContentControl(ele1,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   = ele.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.firstElementChild;                                                 // 获取头部移动元素

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 : 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 

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 

height = this.min;

if(width 

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 

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 

height = this.min;

if(width 

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 

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 

height = this.min;

if(width 

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 

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 

height = this.min;

else

top = this.divTop + this.y;

if(width 

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";

}