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

/*

DragResize v1.0

(c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com

Licensed under the CC-GNU LGPL, version 2.1 or later:

http://creativecommons.org/licenses/LGPL/2.1/

This is distributed WITHOUT ANY WARRANTY; without even the implied

warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

*/

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

/* Required CSS classes: must be included in all pages using this script */

/* Apply the element you want to drag/resize */

.drsElement {

position: absolute;

border: 1px solid #333;

}

/*

The main mouse handle that moves the whole element.

You can apply to the same tag as drsElement if you want.

*/

.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!

// You first declare a new DragResize() object, passing its own name and an object

// whose keys constitute optional parameters/settings:

var dragresize = new DragResize('dragresize',

{ minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });

// Optional settings/properties of the DragResize object are:

// enabled: Toggle whether the object is active.

// handles[]: An array of drag handles to use (see the .JS file).

// minWidth, minHeight: Minimum size to which elements are resized (in pixels).

// minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).

// Next, you must define two functions, isElement and isHandle. These are passed

// a given DOM element, and must "return true" if the element in question is a

// draggable element or draggable handle. Here, I'm checking for the CSS classname

// of the elements, but you have have any combination of conditions you like:

dragresize.isElement = function(elm)

{

if (elm.className && elm.className.indexOf('drsElement') > -1) return true;

};

dragresize.isHandle = function(elm)

{

if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;

};

// You can define optional functions that are called as elements are dragged/resized.

// Some are passed true if the source event was a resize, or false if it's a drag.

// The focus/blur events are called as handles are added/removed from an object,

// and the others are called as users drag, move and release the object's handles.

// You might use these to examine the properties of the DragResize object to sync

// other page elements, etc.

dragresize.ondragfocus = function() { };

dragresize.ondragstart = function(isResize) { };

dragresize.ondragmove = function(isResize) { };

dragresize.ondragend = function(isResize) { };

dragresize.ondragblur = function() { };

// Finally, you must apply() your DragResize object to a DOM node; all children of this

// node will then be made draggable. Here, I'm applying to the entire document.

dragresize.apply(document);

//]]>

</script>

</head>

<body style="font: 13px/20px sans-serif; background-color: #FFF">

<div style="text-align: center">

<h1 style="font: 32px/48px sans-serif">DragResize v1.0</h1>

by Angus Turnbull - <a href="http://www_php168_com">http://www_php168_com</a>.

Updated: 27 June 2006.

<hr />

</div>

<!--

Here's our draggable elements.

All that's required is that they have a relative or absolute CSS 'position',

and are matched by the isElement/isHandle methods of a DragResize object.

Easy!

-->

<div class="drsElement"

style="left: 50px; top: 150px; width: 250px; height: 120px;

background: #CDF; text-align: center">

<div class="drsMoveHandle">Div 0</div>

Content

</div>

<div class="drsElement"

style="left: 20px; top: 300px; width: 150px; height: 200px;

background: #FDC; text-align: center">

<div class="drsMoveHandle">Div 1</div>

Content

</div>

<div class="drsElement drsMoveHandle"

style="left: 150px; top: 280px; width: 50px; height: 100px;

background: #DFC; text-align: center">

Div 2

Content

</div>

<div style="margin-top: 400px"><!-- spacer --></div>

<p>This is a JavaScript library that lets you easily implement user-friendly

and customisable dragging and resizing of your page elements. You might want to

use it as part of a web application -- it contains all you need for a

lightweight "windowing" system. Features include:</p>

<ul>

<li><strong>Can both drag and resize</strong> page elements.</li>

<li><strong>Works with absolute and relatively positioned</strong> elements

 in your page.</li>

<li><strong>Customisable appearance</strong> as it makes extensive use of CSS

 classes for layout of its resisze handles.</li>

<li><strong>Unobtrusive, Object-Orientated JavaScript</strong> means it's easy

 to add to your pages.</li>

<li><strong>Bounding boxes and minimum sizes</strong> can be set and

 automatically enforced.</li>

<li><strong>Cross-browser compatible</strong> so it works for everyone.</li>

<li><strong>Small code size</strong> so your visitors don't have to wait!</li>

</ul>

<div style="border: 2px solid red; background: #FFF0F0; padding: 0pt 10pt 0pt 10pt">

<h4>Script License Agreement</h4>

<p>DragResize &copy; 2005-2006 Angus Turnbull, TwinHelix Designs

<a href="http://www.twinhelix.com">http://www.twinhelix.com</a></p>

<p>Licensed under the

 <a href="http://creativecommons.org/licenses/LGPL/2.1/">CC-GNU LGPL,

 version 2.1 or later</a>.</p>

<p>This is distributed WITHOUT ANY WARRANTY; without even the implied

 warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.</p>

</div>

<p>I hope you find it handy!

It's free for you to use and distribute, as long as you retain the license and

copyright as per the LGPL.

If you like this and/or my other scripts, you're more than welcome to

<a href="http://www.twinhelix.com/donate/">make a donation</a>.

See the source for more details and instructions.</p>

<p>Note: DragResize was conceived initially as part of my work on the

<a href="http://www.fotonotes.net">Fotonotes DHTML Client</a>.</p>

<p><em>Good luck - Angus.</em></p>

</body>

</html>

参考出处：http://www.99n9.com/note/view/id/1818

js实现可拉伸移动的div的更多相关文章

  1. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  2. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  3. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  4. js实现由分隔栏决定两侧div的大小—js动态分割div

    /*================index.html===================*/ <!DOCTYPE html><html lang="zh-cn&quo ...

  5. JS把内容动态插入到DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  6. js可以随意拖拽的div的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

  8. Js实现将html页面或div生成图片

    参考:https://blog.csdn.net/huwei2003/article/details/79761580 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2 ...

  9. js用斜率判断鼠标进入div的四个方向

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...

随机推荐

  1. Hibernate 使用MyEclipse简化开发

    在平时开发中写配置文件比较繁琐,在这里写一下如何使用myEclipse简化开发. 1.打开MyEclipse,创建数据库连接 单机测试连接按钮,如果出现成功建立连接,则连接成功. 然后Finish 2 ...

  2. 快速傅里叶变换(FFT)相关内容汇总

    (原稿:https://paste.ubuntu.com/p/yJNsn3xPt8/) 快速傅里叶变换,是求两个多项式卷积的算法,其时间复杂度为$O(n\log n)$,优于普通卷积求法,且根据有关证 ...

  3. Codeforces 990G 点分治+暴力

    题意:给出一棵点带权的树,求i\(\in\)[1,200000]所有路径的上点权的gcd==i的个数. 考虑点分治,对于一棵以u为根的子树,如何统计经过u的路径的答案? 显然既然是经过点u的路径,那么 ...

  4. 【BIT套主席树】COGS257-动态排名系统

    题意同BZOJ1901,多组数据,数据范围也不一样.重新写一遍复习一下. #include<iostream> #include<cstdio> #include<cst ...

  5. [HAOI2012]外星人

    题目大意: 告诉你一个数n,求满足φ^x(n)=1的x. 思路: 首先我们可以发现满足φ(n)=1的数只有2,也就是说你得到最终的结果,最后一步肯定是φ(2). 同时,可以发现φ(φ(2^k))=φ( ...

  6. bzoj 1006 弦图染色

    给定一个弦图,问最少染色数. 对于弦图的一个完美消去序列,从后往前染色,每次染可以染的最小编号的颜色,由完美消去序列的定义,序列任一后缀的点的导出子图中,由该后缀第一个元素及其邻接点导出的子图一定是完 ...

  7. bzoj1002 生成树计数 找规律

    这道题第一眼是生成树计数,n是100,是可以用O(n^3)的求基尔霍夫矩阵的n-1阶的子矩阵的行列式求解的,但是题目中并没有说取模之类的话,就不好办了. 用高精度?有分数出现. 用辗转相除的思想,让它 ...

  8. bzoj 3298: [USACO 2011Open]cow checkers -- 数学

    3298: [USACO 2011Open]cow checkers Time Limit: 10 Sec  Memory Limit: 128 MB Description 一天,Besssie准备 ...

  9. 洛谷P1341 最受欢迎的奶牛

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...

  10. Spring MVC @ModelAttribute 详解

    1.@ModelAttribute注释void返回值的方法 @Controller public class HelloModelController { @ModelAttribute public ...