<HTML> <head> <title>From Dynatable demo - produced by Marcio Galli</title> <script> //------------------------------------------------------------------------------------- // start function // // This function is called when the page is loaded. // See the onload="start()" attribute in the body tag. // function start() { //-------------------------------------------------------------------- // Adding beginDrag function as event listener for mousedown event // at dd_image and dd_resize elements. // // NOTE: dd_image is the div that contains the jpg image. // dd_resize is a small image used as icon to resize the dd_image. // document.getElementById("dd_image").addEventListener("mousedown",beginDrag, false); document.getElementById("dd_resize").addEventListener("mousedown",beginDrag, false); } //------------------------------------------------------------------------------------- // doDrag event - called when dragging // function doDrag(e) { // Calculates the difference between the last mouse position // and the current position. // var difX=e.clientX-window.lastX; var difY=e.clientY-window.lastY; // If mode equals resize... (see beginDrag function) // if(dd_mode=="resize") { // Then the drag operation is just for the little resize icon. // // Retrieves the x and y position for the dd_resize2 div and adding // the dif value. // NOTE that the dd_resize2 includes the dd_resize image (icon). // var newX1 = parseInt(document.getElementById("dd_resize2").style.left)+difX; var newY1 = parseInt(document.getElementById("dd_resize2").style.top)+difY; // Sets the new position document.getElementById("dd_resize2").style.left=newX1+"px"; document.getElementById("dd_resize2").style.top=newY1+"px"; } else { // Same thing but now for dd_area... // In this case the user is dragging the image instead the little resize icon. // var newX1 = parseInt(document.getElementById("dd_area").style.left)+difX; var newY1 = parseInt(document.getElementById("dd_area").style.top)+difY; document.getElementById("dd_area").style.left=newX1+"px"; document.getElementById("dd_area").style.top=newY1+"px"; } // Stores the current mouse position. // window.lastX=e.clientX; window.lastY=e.clientY; } //---------------------------------------------------------------------------- // When drag begins, this function is called.. see addEventListener calls // in start function. // function beginDrag(e) { e.preventDefault(); // Stores the current mouse position for further use. // window.lastX=e.clientX; window.lastY=e.clientY; // Register doDrag event handler to receive generic onmousemove events. // window.onmousemove=doDrag; // Register endDrag event handler to receive generic onmouseup events. // window.onmouseup=endDrag; // Verify the attribute of the event's target. myattr=e.target.getAttribute("ID"); if(myattr=="dd_resize") { // If the attribute's value is dd_resize, // the user clicked over the dd_resize image, // and the dd_mode should be resized. dd_mode="resize"; } else { // Else the user just clicked over the image, so the mode is set to drag. // dd_mode="drag"; } } //---------------------------------------------------------------------------- // Called when the mouse button is released // function endDrag(e) { // Releases the onmousemove event. window.onmousemove=null; // If the operation is resize then... if(dd_mode=="resize") { // DOM Steps to resize the image. // Stores the x and y position of the dd_resize2 icon area and the dd_image are var oldX1 = parseInt(document.getElementById("dd_resize2").style.left); var oldY1 = parseInt(document.getElementById("dd_resize2").style.top); var oldX2 = parseInt(document.getElementById("dd_image").style.left); var oldY2 = parseInt(document.getElementById("dd_image").style.top); // Since user was resizing by dragging the dd_resize2 div element, the // oldX1 and oldY1 values represent the new resize position. // In this case, the difference between oldX1 and oldX2 is the new width. ddx=oldX1-oldX2; // And the difference between oldY1 and oldY2 is the new height. ddy=oldY1-oldY2; // Dynamicallty sets the width and height attributes. imagg=document.getElementById("img"); imagg.setAttribute("width",""+ddx+""); imagg.setAttribute("height",""+ddy+""); // dd_area is an area in the background of the image. It is a border. // Its width and height values are the same as those for ddx and ddy plus 2 pixels. // NOTE that dd_area in the HTML is a single div with gray background, // so the size can be changed directly by setting style width and height // properties. // ndx=ddx+2; document.getElementById("dd_area").style.width=ndx+"px"; ndy=ddy+2; document.getElementById("dd_area").style.height=ndy+"px"; } } </script> </head> <body onload="start()"> <div id="dd_area" style="position:absolute;left:0px;top:0px;width:598px;height:216px;background-color:gray"> <div id="dd_image" style="position:absolute;left:1px;top:1px"> <img id="img" src="geckosmic.jpg" width="597" > </div> <div id="dd_resize2" style="position:absolute;left:599px;top:217px;"> <img id="dd_resize" src="resizeicon.gif"> </div> </div> </body> </HTML>