로컬에서 IE6을 직접 지원하는데, 마우스를 클릭하면 커서가 텍스트 선택 커서로 바뀌는 문제가 있는데 어떻게 처리해야 할까요? 여기에 코드를 기록하세요: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>간단한 드래그 앤 드롭 확장</title> <style type="text/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> <div id="outwarp"> <div class="controlBox"> <div class="resize lt"></div> <div class="resize tr"></div> <div class="resize rb"></div> <div class="resize bl"></div> <div class="controlBar"> <h2>여기를 클릭하여 드래그하세요</h2> </div> <div class="innerCon"> <p>중간 내용중간 내용중간 내용중간 내용중간 내용중간 내용중간 내용 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 중간 내용 </p> </div> </div> </div> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] (function () { //定义便捷函数getElementById,getElementsByTagName,getElementsByClassName,bindFunction,bindEvent function $() { 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;//获取最外围的包裹层ID var 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; // 光标LEFT var mousey = event.clientY; //光标TOP //console.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.offsetHeight+'my.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' }); })()
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
