235 lines
7.0 KiB
HTML
235 lines
7.0 KiB
HTML
<!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>
|