火狐浏览器支持不好 , ie不能用.....谷歌最好
代码也有bug,快速操作的时候会出现小浮动的偏移 , 不能两个一块拖动
在网上看到有这个功能就自己写了一个,写的不好有简单的方法可以留言指正谢谢!
<!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> <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;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;} </style> </head> <body> <div class="s-move-content-outer" tabIndex="1" > <div class="s-move-content-header" tabIndex="1" >请移动我 <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> <textarea style="width:100%;height:170px;box-sizing: border-box;" ></textarea> </div> <!-- <div class="s-move-content-outer" tabIndex="1" > <div class="s-move-content-header" tabIndex="1" >请移动俺 <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> <textarea style="width:100%;height:170px;box-sizing: border-box;" ></textarea> </div> --> </body> </html> <script> 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); } </script> <script> 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 < 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>