汉服网站怎么做,如何安装 wordpress,h5 移动 网站 开发,江门网站推广哪里专业上次做的简单的拖拽#xff1a;javascript简单拖拽练习(鼠标事件 mousedown mousemove mouseup) 这次增加了一些相关的功能#xff0c;增加四个角的拉伸改变宽度#xff0c;主要还是用到一些简单的坐标位置计算#xff0c;没有什么技术难度#xff0c;熟练了一下自己对拖拽…上次做的简单的拖拽javascript简单拖拽练习(鼠标事件 mousedown mousemove mouseup) 这次增加了一些相关的功能增加四个角的拉伸改变宽度主要还是用到一些简单的坐标位置计算没有什么技术难度熟练了一下自己对拖拽的运用 不晓得为什么粘贴到博客园上就不支持IE6了直接在本地是支持IE6的有个问题就是鼠标点击的时候光标会变为选择文字的光标不知道应该怎么 处理这个问题呢 DEMO如下 按此处拖动 中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间 内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 中间内容中间内容中间内容中间内容中间内容中间内容 在此记录一下代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title简单拖拽扩展/titlestyle typetext/css*{margin:0;padding:0;}#outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; }.controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;}.controlBar{cursor: move;}.controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;}.innerCon{text-align: left; line-height: 20px;}.innerCon p{ padding: 10px; color: #000;}.resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;}.lt{left:0;right:0; cursor:nw-resize;}.tr{right:0;top: 0;cursor:ne-resize;}.rb{right:0;bottom: 0; cursor:nw-resize;}.bl{left:0;bottom:0;cursor:ne-resize;}/style
/head
body
div idoutwarpdiv classcontrolBoxdiv classresize lt/divdiv classresize tr/divdiv classresize rb/divdiv classresize bl/divdiv classcontrolBarh2按此处拖动/h2/divdiv classinnerConp中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容/p/div/div
/div
script typetext/javascript
(function () {//定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEventfunction $() {var elements new Array();for (var i 0; i arguments.length; i) {var element arguments[i];if (typeof element string) {element document.getElementById(element);}if (!element) {continue;}if (arguments.length 1) {return element;}elements.push(element);}return elements;}function $$(tag, parent) {parent parent || document;return $(parent).getElementsByTagName(tag);}function $$$(str, parent, tag) {if (parent) {parent $(parent);} else {parent document;}tag tag || *;var els parent.getElementsByTagName(tag),arr [];for (var i 0, n els.length; i n; i) {for (var j 0, k els[i].className.split( ), l k.length; j l; j) {if (k[j] str) {arr.push(els[i]);break;}}}return arr;}function bindFunction(obj, func) {return function () {return func.apply(obj, arguments);};}function bindEvent(element, type, func) {if (element.addEventListener) {element.addEventListener(type, func, false); //false 表示冒泡} else if (element.attachEvent) {element.attachEvent(on type, func);} else {element[on type] func;}}/*定义拖拽类*/var DragBox function (options) {var outWarpId this.outWarpId options.outWarpId;//获取最外围的包裹层IDvar outWarp $(outWarpId);//获取外围包裹层对象var controlBox this.controlBox $$$(controlBox, outWarp, div)[0]; //被拖动的层this.controlBar $$$(controlBar, controlBox, div)[0];this.resizeLt $$$(lt, controlBox, div)[0];this.resizeTr $$$(tr, controlBox, div)[0];this.resizeRb $$$(rb, controlBox, div)[0];this.resizeBl $$$(bl, controlBox, div)[0];/*获取outWarpId信息*/this.warpWidth outWarp.offsetWidth - 2; // 对象宽度this.warpHeight outWarp.offsetHeight - 2; // 对象高度this.warpLeft outWarp.offsetLeft; //对象靠LEFT距离this.warpTop outWarp.offsetTop; //对象靠TOP距离/*定义拖动的对象*/this.draging null;this.bind();};DragBox.prototype {moveBox:function (event) {event event || window.event;var target event.target || event.srcElement;// 记录滚动条位置this.scrollTop document.documentElement.scrollTop || document.body.scrollTop;this.scrollLeft document.documentElement.scrollLeft || document.body.scrollLeft;//记录光标的位置var mousex event.clientX; // 光标LEFTvar mousey event.clientY; //光标TOPconsole.log(mousex: mousex);console.log(mousey: mousey);// 光标相对outwarp层的坐标var posx mousex this.scrollLeft - this.warpLeft;var posy mousey this.scrollTop - this.warpTop;// 多次用到this.controlBox 赋值一个短变量名var my this.controlBox;// 多次用到this.controlBox.style赋值一个短变量名var myStyle my.style;// 最小尺寸var minWidth 200,minHeight 200;switch(event.type){case mousedown:/*记录相关初始信息*/if(target.parentNode.className.indexOf(controlBar)!-1){this.draging this.controlBox; //赋值拖动对象}if(target.className.indexOf(rb)! -1){this.draging this.resizeRb; // 赋值为右下角拖动}if(target.className.indexOf(tr)! -1){this.draging this.resizeTr; // 赋值为右上角改变大小}if(target.className.indexOf(lt)! -1){this.draging this.resizeLt; // 赋值为左上角改变大小}if(target.className.indexOf(bl) ! -1){this.draging this.resizeBl;}//alert(this.scrollTop:this.scrollTop);//点击时记录拖动层的初始信息this.controlBoxWidth my.offsetWidth; //拖动层的宽度this.controlBoxHeight my.offsetHeight; //拖动层的宽度this.controlBoxLeft my.offsetLeft; //拖动层的LEFT坐标this.controlBoxTop my.offsetTop; //拖动层的TOP坐标// 记录鼠标按下时鼠标相对与拖动层的距离this.mx posx - this.controlBoxLeft;this.my posy - this.controlBoxTop;// 记录左下角的坐标因为按住右上拖动的时候左下角不动this.lb_x my.offsetWidth my.offsetLeft;this.lb_y my.offsetHeight my.offsetTop;console.log(my.offsetHeight:my.offsetHeightmy.offsetTop:my.offsetTop);// 记录右下角坐标按住左上角拖动的时候右下角不动this.rb_x my.offsetLeft my.offsetWidth;this.rb_y my.offsetTop my.offsetHeight;// 记录右上角坐标当按住左下角的时候右上角不动this.lt_x my.offsetLeft my.offsetWidth;this.lt_y my.offsetTop;break;case mousemove:if (this.draging this.controlBox){window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消页面上由于鼠标按下拖动造成的选中文字和图片的选择状态//拖动层的位置var left posx - this.mx;var top posy - this.my;left 0 (left 0);top 0 (top 0);left (this.warpWidth - this.controlBoxWidth) (left this.warpWidth - this.controlBoxWidth);top (this.warpHeight - this.controlBoxHeight) (top this.warpHeight - this.controlBoxHeight);//改变位置myStyle.left left px;myStyle.top top px;//右下角拖动} else if (this.draging this.resizeRb) {// 需要改变的宽度var changeWidth posx - this.controlBoxWidth - this.controlBoxLeft,changeHeight posy - this.controlBoxHeight - this.controlBoxTop,// 计算总宽度allWidth this.controlBoxWidth changeWidth this.controlBoxLeft ,allHeight this.controlBoxHeight changeHeight this.controlBoxTop;//改变宽度myStyle.width (this.controlBoxWidth changeWidth) px;myStyle.height (this.controlBoxHeight changeHeight) px;// 限制最大宽度if (allWidth this.warpWidth) {myStyle.width ( this.warpWidth - this.controlBoxLeft) px;}if (allHeight this.warpHeight) {myStyle.height (this.warpHeight - this.controlBoxTop) px;}// 限制最小宽度if ( parseInt(myStyle.width) minWidth)myStyle.width minWidth px;if (parseInt(myStyle.height) minHeight) myStyle.height minHeight px;// 右上角} else if (this.draging this.resizeTr) {// 需要改变的宽度该变高度即改变TOP的坐标changeWidth posx - this.controlBoxWidth - this.controlBoxLeft;// 计算总宽度allWidth this.controlBoxWidth changeWidth this.controlBoxLeft;// 改变宽度myStyle.width (this.controlBoxWidth changeWidth) px;if (allWidth this.warpWidth) myStyle.width ( this.warpWidth - this.controlBoxLeft) px;if ( parseInt(myStyle.width) minWidth) myStyle.width minWidth px;// 改变高度my.style.top posy px;my.style.height (this.controlBoxHeight (this.controlBoxTop - posy)) px;if(parseInt(my.style.height) minHeight){my.style.height minHeight px;my.style.top (this.lb_y - minHeight) px;}if(parseInt(my.style.height)this.lb_y){my.style.height this.lb_y px;my.style.top 0;}// 左上角}else if (this.draging this.resizeLt) {changeWidth this.controlBoxLeft - posx;changeHeight this.controlBoxTop - posy;my.style.left posx px;my.style.width (this.controlBoxWidth changeWidth) px;my.style.top posy px;my.style.height (this.controlBoxHeight changeHeight) px;// 限制宽高度最大值if(parseInt(my.style.width) this.controlBoxLeft this.controlBoxWidth){my.style.width (this.controlBoxLeft this.controlBoxWidth) px;my.style.left 0;}else if(parseInt(my.style.width) minWidth){my.style.left (this.rb_x - minWidth) px;my.style.width minWidth px;}if(parseInt(my.style.height) this.controlBoxHeight this.controlBoxTop){my.style.height (this.controlBoxHeight this.controlBoxTop) px;if(parseInt(my.style.top)0) my.style.top 0;}else if(parseInt(my.style.height) minHeight){my.style.top (this.rb_y - minHeight) px;my.style.height minHeight px;}// 左下角}else if(this.draging this.resizeBl){changeWidth this.controlBoxLeft - posx;changeHeight posy - this.controlBoxHeight - this.controlBoxTop;my.style.left posx px;my.style.width this.controlBoxWidth changeWidth px;my.style.height this.controlBoxHeight changeHeight px;if(parseInt(my.style.width) minWidth){my.style.width minWidth px;my.style.left this.lt_x - minWidth px;}else if(parseInt(my.style.width) this.lt_x){my.style.width this.lt_x px;my.style.left 0;}if(parseInt(my.style.height) minHeight){my.style.height minHeight px;}else if(parseInt(my.style.height) this.warpHeight- this.lt_y){my.style.height this.warpHeight- this.lt_y px;}}break;case mouseup:this.draging null;break;}},bind:function () {var that this;bindEvent(document, mousedown, bindFunction(that,that.moveBox));bindEvent(document, mousemove, bindFunction(that,that.moveBox));bindEvent(document, mouseup, bindFunction(that,that.moveBox));}};var demo new DragBox({outWarpId:outwarp});
})()
/script
/body
/html 转载于:https://www.cnblogs.com/NNUF/archive/2012/05/17/2506123.html
