secretsquirrel
Programmer
hi guys, i've got the following page which contains a drag and drop <div>.
i've been asked to add a handle in the bottom right corner of it which, when dragged, will resize the <div> - much like resizing a browser window.
i've put in an image in the corner to use as the handle, but i don't know how to implement the resizing. at the moment, the handle just drags annd drops like the rest of the layer.
can anyone suggest anything?
---------------------------------------
<HTML>
<HEAD>
<TITLE>resize</TITLE>
<STYLE TYPE="text/css"><!--
.text10 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #EFEFEF; line-height: 14px; padding-left: 3px; padding-right: 3px }
.drag { background-color: #EFEFEF; position: absolute; padding: 3px; border: 1px solid #CCCCCC }
INPUT { font-family: Verdana; font-size: 10px; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" ID=code>
// this code allows any absolutely positioned element to be dragged
var dragElmt = null // track current item
function doMouseMove()
{
// check if mouse button is down and if an element is being dragged
if ((1 == event.button) && (dragElmt != null))
{
// move the element to where the mouse is in the document
var intTop = event.clientY + document.body.scrollTop;
var intLeft = event.clientX + document.body.scrollLeft;
// calculate what element the mouse is actually in
var intLessTop = 0;
var intLessLeft = 0;
var currElmt = dragElmt.offsetParent;
while (currElmt.offsetParent != null)
{
intLessTop += currElmt.offsetTop;
intLessLeft += currElmt.offsetLeft;
currElmt = currElmt.offsetParent;
}
// set new position
dragElmt.style.pixelTop = intTop - intLessTop - dragElmt.y;
dragElmt.style.pixelLeft = intLeft - intLessLeft - dragElmt.x;
event.returnValue = false;
}
}
function checkDrag(elCheck)
{
// check if the clicked element supports dragging
while (elCheck != null)
{
if (null != elCheck.getAttribute("dragEnabled"
)
return elCheck
elCheck = elCheck.parentElement
}
return null
}
function doMouseDown()
{
// store element on mousedown. called from click handler in code below
var currElmt = checkDrag(event.srcElement)
if (null != currElmt)
{
dragElmt = currElmt;
// determine where the mouse is in the element
dragElmt.x = event.offsetX
dragElmt.y = event.offsetY
var op = event.srcElement
// find real location in respect to element being dragged
if ((dragElmt != op.offsetParent) && (dragElmt != event.srcElement))
{
while (op != dragElmt)
{
dragElmt.x += op.offsetLeft
dragElmt.y += op.offsetTop
op = op.offsetParent
}
}
}
}
function doSelectStart()
{
// don't start text selections in dragged elements.
return (null == checkDrag(event.srcElement) && (dragElmt != null))
}
function LS_collapse(whichLayer,whichImage)
{
if (whichLayer.style.display == 'none')
{
whichLayer.style.display = 'block';
whichImage.src = "shrink.gif";
} else {
whichLayer.style.display = 'none';
whichImage.src = "grow.gif";
}
}
function LS_reset(whichHolder,l,t)
{
whichHolder.style.left = l;
whichHolder.style.top = t;
}
// Process mousemove.
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
// Reset element on mouseup.
document.onmouseup = new Function("dragElmt=null"
document.onselectstart = doSelectStart;
</SCRIPT>
<BODY BGCOLOR="#FFFFFF">
<DIV id="holder1" class="drag" style="width: 300px; left: 200px; top: 15px;" dragEnabled>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<img src="reset.gif" onClick="LS_reset(holder1,'200','15');" onMouseDown="event.cancelBubble=true">
<img id="image1" src="shrink.gif" onClick="LS_collapse(layer1,image1)" onMouseDown="event.cancelBubble=true">
</td>
</tr>
</table>
<div id="layer1" align="center">
<table cellpadding=0 cellspacing=0 width=100% class="text10">
<tr>
<td class="text10" width="32%">item 1</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="text10" width="32%">item 2</td>
<td><input type="text"> <input type="button" value="Lookup" onMouseDown="event.cancelBubble=true"></td>
</tr>
<tr>
<td width="32%"> </td>
<td align="right">
<img src="reset.gif" id="sizer" dragEnabled style="position: absolute;">
</td>
</tr>
</table>
</div>
</DIV>
</BODY>
</HTML>
---------------------------------------
thanks in advance,
ss
i've been asked to add a handle in the bottom right corner of it which, when dragged, will resize the <div> - much like resizing a browser window.
i've put in an image in the corner to use as the handle, but i don't know how to implement the resizing. at the moment, the handle just drags annd drops like the rest of the layer.
can anyone suggest anything?
---------------------------------------
<HTML>
<HEAD>
<TITLE>resize</TITLE>
<STYLE TYPE="text/css"><!--
.text10 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #EFEFEF; line-height: 14px; padding-left: 3px; padding-right: 3px }
.drag { background-color: #EFEFEF; position: absolute; padding: 3px; border: 1px solid #CCCCCC }
INPUT { font-family: Verdana; font-size: 10px; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" ID=code>
// this code allows any absolutely positioned element to be dragged
var dragElmt = null // track current item
function doMouseMove()
{
// check if mouse button is down and if an element is being dragged
if ((1 == event.button) && (dragElmt != null))
{
// move the element to where the mouse is in the document
var intTop = event.clientY + document.body.scrollTop;
var intLeft = event.clientX + document.body.scrollLeft;
// calculate what element the mouse is actually in
var intLessTop = 0;
var intLessLeft = 0;
var currElmt = dragElmt.offsetParent;
while (currElmt.offsetParent != null)
{
intLessTop += currElmt.offsetTop;
intLessLeft += currElmt.offsetLeft;
currElmt = currElmt.offsetParent;
}
// set new position
dragElmt.style.pixelTop = intTop - intLessTop - dragElmt.y;
dragElmt.style.pixelLeft = intLeft - intLessLeft - dragElmt.x;
event.returnValue = false;
}
}
function checkDrag(elCheck)
{
// check if the clicked element supports dragging
while (elCheck != null)
{
if (null != elCheck.getAttribute("dragEnabled"
) return elCheck
elCheck = elCheck.parentElement
}
return null
}
function doMouseDown()
{
// store element on mousedown. called from click handler in code below
var currElmt = checkDrag(event.srcElement)
if (null != currElmt)
{
dragElmt = currElmt;
// determine where the mouse is in the element
dragElmt.x = event.offsetX
dragElmt.y = event.offsetY
var op = event.srcElement
// find real location in respect to element being dragged
if ((dragElmt != op.offsetParent) && (dragElmt != event.srcElement))
{
while (op != dragElmt)
{
dragElmt.x += op.offsetLeft
dragElmt.y += op.offsetTop
op = op.offsetParent
}
}
}
}
function doSelectStart()
{
// don't start text selections in dragged elements.
return (null == checkDrag(event.srcElement) && (dragElmt != null))
}
function LS_collapse(whichLayer,whichImage)
{
if (whichLayer.style.display == 'none')
{
whichLayer.style.display = 'block';
whichImage.src = "shrink.gif";
} else {
whichLayer.style.display = 'none';
whichImage.src = "grow.gif";
}
}
function LS_reset(whichHolder,l,t)
{
whichHolder.style.left = l;
whichHolder.style.top = t;
}
// Process mousemove.
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
// Reset element on mouseup.
document.onmouseup = new Function("dragElmt=null"
;document.onselectstart = doSelectStart;
</SCRIPT>
<BODY BGCOLOR="#FFFFFF">
<DIV id="holder1" class="drag" style="width: 300px; left: 200px; top: 15px;" dragEnabled>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<img src="reset.gif" onClick="LS_reset(holder1,'200','15');" onMouseDown="event.cancelBubble=true">
<img id="image1" src="shrink.gif" onClick="LS_collapse(layer1,image1)" onMouseDown="event.cancelBubble=true">
</td>
</tr>
</table>
<div id="layer1" align="center">
<table cellpadding=0 cellspacing=0 width=100% class="text10">
<tr>
<td class="text10" width="32%">item 1</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="text10" width="32%">item 2</td>
<td><input type="text"> <input type="button" value="Lookup" onMouseDown="event.cancelBubble=true"></td>
</tr>
<tr>
<td width="32%"> </td>
<td align="right">
<img src="reset.gif" id="sizer" dragEnabled style="position: absolute;">
</td>
</tr>
</table>
</div>
</DIV>
</BODY>
</HTML>
---------------------------------------
thanks in advance,
ss
