init
This commit is contained in:
234
modules/EcmDocuments/dragresize.html
Executable file
234
modules/EcmDocuments/dragresize.html
Executable file
@@ -0,0 +1,234 @@
|
||||
<!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 type="text/javascript" src="dragresize.js"></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.twinhelix.com">http://www.twinhelix.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 © 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>
|
||||
Reference in New Issue
Block a user