|
|
drag and drop an image
Some of the higher functions of a web page can be very simple to implement. Dragging and dropping an image into a new location can be very a handy method of increasing production. We first start with an absolutely positioned image placed in the usual way within the document. We then read the co-ordinates of the image and keep reading those co-ordinates as the image is dragged and dropped. The last last co-ordinates of the image are read and an action is assigned if the co-ordinates are within a range you specify, such as the location of a different section within a larger table.
A function is triggered with the onMouseDown event handler and the image is released from its positioning constraints. Upon the execution of an onMouseUp event, the new position is read and the image is repositioned elsewhere. You can assign scripted actions according to where the image was last placed (dropped).
<html>
<head>
<style>
Img {position:absolute; }
</style>
<script type="text/javascript">
document.onmousedown=coordinates;
document.onmouseup=mouseup;
function coordinates(e) {
if (e == null) { e = window.event;}
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
if (sender.id=="moveMe") {
mouseover=true;
pleft=parseInt(movMeId.style.left);
ptop=parseInt(movMeId.style.top);
xcoor=e.clientX;
ycoor=e.clientY;
document.onmousemove=moveImage;
return false;
} else {
return false;
}
}
function moveImage(e) {
if (e == null) {
e = window.event;
}
movMeId.style.left=pleft+e.clientX-xcoor+"px";
movMeId.style.top=ptop+e.clientY-ycoor+"px";
return false;
}
function mouseup(e) {
document.onmousemove=null;
}
</script>
</head>
<body>
<img id="moveMe" src="smiley.gif" width="32" height="32">
<script type="text/javascript">
//The movable image
movMeId=document.getElementById("moveMe");
//image starting location
movMeId.style.top="75px";
movMeId.style.left="75px";
</script>
</body>
</html>
Note that the start position of the image is stated within SCRIPT tags near the bottom of the document. This can be anywhere within the document and is the start values that will be altered as the image is moved. We used both the X and Y axis co-ordinates, but this isn’t required if you’d like to keep the images in line vertically or horizontally. If you use this method, the user doesn’t actually have to keep the image being repositioned within the line of vertical or horizontal space – the browser will record only the X or Y axis co-ordinates regardless of the other co-ordinate that the image is actually travelling on.
|
|
