DIV可移动可实现任意拖动放大缩小_div拖拽放大缩小资源-CSDN文库

共1个文件

txt：1个

4星 · 超过85%的资源需积分: 50 146 浏览量 2011-06-22 09:41:00 上传评论 5 收藏 4KB RAR 举报

标题中的“DIV可移动可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态调整位置和大小的组件。在JavaScript中，实现这样的功能主要涉及以下知识点： 1. **DOM操作**：DOM（Document Object Model）是HTML和XML文档的结构模型，JavaScript通过DOM可以访问和操作页面上的元素。在本例中，我们需要获取目标div元素，这可以通过`document.getElementById`或`querySelector`等方法实现。 2. **事件监听**：为了让div可以被拖动，我们需要监听鼠标的`mousedown`、`mousemove`和`mouseup`事件。`mousedown`事件表示鼠标按键按下，`mousemove`事件发生在鼠标移动时，`mouseup`事件则发生在鼠标按键释放。这些事件结合使用，可以跟踪用户的拖动行为。 3. **坐标计算**：在`mousemove`事件处理函数中，我们需要计算鼠标的相对位置，以确定div的新位置。这涉及到获取鼠标的当前位置和div的初始位置，然后更新div的`style.left`和`style.top`属性。 4. **缩放功能**：实现div的缩放功能，可能需要监听`mousedown`和`mousemove`事件，并且需要计算鼠标点击的位置（作为缩放的中心点），以及每次鼠标移动时的缩放比例。这通常涉及到`scale` CSS变换，或者直接更改div的宽度和高度。 5. **边界检测**：为了防止div被拖出可视区域，我们需要添加边界检测逻辑，确保div的位置始终在合理的范围内。 6. **CSS样式**：为了让div可拖动和可缩放，可能需要设置一些CSS样式，例如设置`position`为`relative`或`absolute`，以便于通过JavaScript更改其位置，同时可能还需要设置`cursor`样式以提供视觉反馈。 7. **代码组织**：为了保持代码的清晰和可维护，通常会将这些功能封装成一个模块或类，例如`DraggableDiv`或`ResizableDiv`，其中包含初始化、绑定事件处理函数、更新位置和大小等方法。 8. **浏览器兼容性**：JavaScript的某些特性在不同浏览器中的支持情况可能会有所不同，因此在编写代码时需要考虑跨浏览器兼容性，可能需要用到像jQuery这样的库，或者使用polyfill来提供不被所有浏览器支持的功能。 9. **性能优化**：为了避免频繁的DOM操作导致的性能问题，可以使用`requestAnimationFrame`来优化动画效果，确保在浏览器重绘之前更新div的位置和大小。在提供的压缩包文件`div_MoveAndLashen.txt`中，很可能是包含了实现这些功能的JavaScript代码，通过阅读和学习这段代码，你可以更深入地理解上述知识点的实现细节。不过，实际的代码分析不在本次的描述范围内，你需要自行打开文件查看和学习。

资源详情

资源评论

资源推荐

收起资源包目录

div_MoveAndLashen.rar （1个子文件）

div_MoveAndLashen.txt 11KB

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="div_lashen.aspx.cs" Inherits="tupian.div_lashen" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Div Drag/Resize Demo</title> <script> if(typeof addEvent!='function'){var addEvent=function(o,t,f,l){var d='addEventListener',n='on'+t,rO=o,rT=t,rF=f,rL=l;if(o[d]&&!l)return o[d](t,f,false);if(!o._evts)o._evts={};if(!o._evts[t]){o._evts[t]=o[n]?{b:o[n]}:{};o[n]=new Function('e','var r=true,o=this,a=o._evts["'+t+'"],i;for(i in a){o._f=a[i];r=o._f(e||window.event)!=false&&r;o._f=null}return r');if(t!='unload')addEvent(window,'unload',function(){removeEvent(rO,rT,rF,rL)})}if(!f._i)f._i=addEvent._i++;o._evts[t][f._i]=f};addEvent._i=1;var removeEvent=function(o,t,f,l){var d='removeEventListener';if(o[d]&&!l)return o[d](t,f,false);if(o._evts&&o._evts[t]&&f._i)delete o._evts[t][f._i]}}function cancelEvent(e,c){e.returnValue=false;if(e.preventDefault)e.preventDefault();if(c){e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation()}};function DragResize(myName,config){var props={myName:myName,enabled:true,handles:['tl','tm','tr','ml','mr','bl','bm','br'],isElement:null,isHandle:null,element:null,handle:null,minWidth:10,minHeight:10,minLeft:0,maxLeft:9999,minTop:0,maxTop:9999,zIndex:1,mouseX:0,mouseY:0,lastMouseX:0,lastMouseY:0,mOffX:0,mOffY:0,elmX:0,elmY:0,elmW:0,elmH:0,allowBlur:true,ondragfocus:null,ondragstart:null,ondragmove:null,ondragend:null,ondragblur:null};for(var p in props)this[p]=(typeof config[p]=='undefined')?props[p]:config[p]};DragResize.prototype.apply=function(node){var obj=this;addEvent(node,'mousedown',function(e){obj.mouseDown(e)});addEvent(node,'mousemove',function(e){obj.mouseMove(e)});addEvent(node,'mouseup',function(e){obj.mouseUp(e)})};DragResize.prototype.select=function(newElement){with(this){if(!document.getElementById||!enabled)return;if(newElement&&(newElement!=element)&&enabled){element=newElement;element.style.zIndex=++zIndex;if(this.resizeHandleSet)this.resizeHandleSet(element,true);elmX=parseInt(element.style.left);elmY=parseInt(element.style.top);elmW=element.offsetWidth;elmH=element.offsetHeight;if(ondragfocus)this.ondragfocus()}}};DragResize.prototype.deselect=function(delHandles){with(this){if(!document.getElementById||!enabled)return;if(delHandles){if(ondragblur)this.ondragblur();if(this.resizeHandleSet)this.resizeHandleSet(element,false);element=null}handle=null;mOffX=0;mOffY=0}};DragResize.prototype.mouseDown=function(e){with(this){if(!document.getElementById||!enabled)return true;var elm=e.target||e.srcElement,newElement=null,newHandle=null,hRE=new RegExp(myName+'-([trmbl]{2})','');while(elm){if(elm.className){if(!newHandle&&(hRE.test(elm.className)||isHandle(elm)))newHandle=elm;if(isElement(elm)){newElement=elm;break}}elm=elm.parentNode}if(element&&(element!=newElement)&&allowBlur)deselect(true);if(newElement&&(!element||(newElement==element))){if(newHandle)cancelEvent(e);select(newElement,newHandle);handle=newHandle;if(handle&&ondragstart)this.ondragstart(hRE.test(handle.className))}}};DragResize.prototype.mouseMove=function(e){with(this){if(!document.getElementById||!enabled)return true;mouseX=e.pageX||e.clientX+document.documentElement.scrollLeft;mouseY=e.pageY||e.clientY+document.documentElement.scrollTop;var diffX=mouseX-lastMouseX+mOffX;var diffY=mouseY-lastMouseY+mOffY;mOffX=mOffY=0;lastMouseX=mouseX;lastMouseY=mouseY;if(!handle)return true;var isResize=false;if(this.resizeHandleDrag&&this.resizeHandleDrag(diffX,diffY)){isResize=true}else{var dX=diffX,dY=diffY;if(elmX+dX<minLeft)mOffX=(dX-(diffX=minLeft-elmX));else if(elmX+elmW+dX>maxLeft)mOffX=(dX-(diffX=maxLeft-elmX-elmW));if(elmY+dY<minTop)mOffY=(dY-(diffY=minTop-elmY));else if(elmY+elmH+dY>maxTop)mOffY=(dY-(diffY=maxTop-elmY-elmH));elmX+=diffX;elmY+=diffY}with(element.style){left=elmX+'px';width=elmW+'px';top=elmY+'px';height=elmH+'px'}if(window.opera&&document.documentElement){var oDF=document.getElementById('op-drag-fix');if(!oDF){var oDF=document.createElement('input');oDF.id='op-drag-fix';oDF.style.display='none';document.body.appendChild(oDF)}oDF.focus()}if(ondragmove)this.ondragmove(isResize);cancelEvent(e)}};DragResize.prototype.mouseUp=function(e){with(this){if(!document.getElementById||!enabled)return;var hRE=new RegExp(myName+'-([trmbl]{2})','');if(handle&&ondragend)this.ondragend(hRE.test(handle.className));deselect(false)}};DragResize.prototype.resizeHandleSet=function(elm,show){with(this){if(!elm._handle_tr){for(var h=0;h<handles.length;h++){var hDiv=document.createElement('div');hDiv.className=myName+' '+myName+'-'+handles[h];elm['_handle_'+handles[h]]=elm.appendChild(hDiv)}}for(var h=0;h<handles.length;h++){elm['_handle_'+handles[h]].style.visibility=show?'inherit':'hidden'}}};DragResize.prototype.resizeHandleDrag=function(diffX,diffY){with(this){var hClass=handle&&handle.className&&handle.className.match(new RegExp(myName+'-([tmblr]{2})'))?RegExp.$1:'';var dY=diffY,dX=diffX,processed=false;if(hClass.indexOf('t')>=0){rs=1;if(elmH-dY<minHeight)mOffY=(dY-(diffY=elmH-minHeight));else if(elmY+dY<minTop)mOffY=(dY-(diffY=minTop-elmY));elmY+=diffY;elmH-=diffY;processed=true}if(hClass.indexOf('b')>=0){rs=1;if(elmH+dY<minHeight)mOffY=(dY-(diffY=minHeight-elmH));else if(elmY+elmH+dY>maxTop)mOffY=(dY-(diffY=maxTop-elmY-elmH));elmH+=diffY;processed=true}if(hClass.indexOf('l')>=0){rs=1;if(elmW-dX<minWidth)mOffX=(dX-(diffX=elmW-minWidth));else if(elmX+dX<minLeft)mOffX=(dX-(diffX=minLeft-elmX));elmX+=diffX;elmW-=diffX;processed=true}if(hClass.indexOf('r')>=0){rs=1;if(elmW+dX<minWidth)mOffX=(dX-(diffX=minWidth-elmW));else if(elmX+elmW+dX>maxLeft)mOffX=(dX-(diffX=maxLeft-elmX-elmW));elmW+=diffX;processed=true}return processed}}; </script> <style type="text/css"> .drsElement { position: absolute; border: 1px solid #333; } .drsMoveHandle { height: 20px; background-color: #CCC; border-bottom: 1px solid #666; cursor: move; } /* The DragResize object name is automatically applied to all generated corner resize handles, as well as one of the individual classes below. */.dragresize { position: absolute; width: 5px; height: 5px; font-size: 1px; background: #EEE; border: 1px solid #333; } /* Individual corner classes - required for resize support. These are based on the object name plus the handle ID. */.dragresize-tl { top: -8px; left: -8px; cursor: nw-resize; } .dragresize-tm { top: -8px; left: 50%; margin-left: -4px; cursor: n-resize; } .dragresize-tr { top: -8px; right: -8px; cursor: ne-resize; } .dragresize-ml { top: 50%; margin-top: -4px; left: -8px; cursor: w-resize; } .dragresize-mr { top: 50%; margin-top: -4px; right: -8px; cursor: e-resize; } .dragresize-bl { bottom: -8px; left: -8px; cursor: sw-resize; } .dragresize-bm { bottom: -8px; left: 50%; margin-left: -4px; cursor: s-resize; } .dragresize-br { bottom: -8px; right: -8px; cursor: se-resize; } </style> <script type="text/javascript"> //<![CDATA[ // Using DragResize is simple!