To drag and drop visual elements, you can write the code yourself; it's not difficult. Here's an example targeted at IE4+ and NS6+. This example enables us to drag and drop an image. When the mouse goes down, we'll start the dragging operation; in the mouse move event, we can move the image to correspond to the mouse location, and in the mouse up event, we can drop the image. When the mouse goes down, I'll record the location of the mouse in the image itself, and start the dragging operation by setting a variable named dragging to true : var xDown, yDown, dragging = false function mouseDown(e) { if(window.event){ e = window.event } xDown = e.clientX - document.getElementById("img1").offsetLeft yDown = e.clientY - document.getElementById("img1").offsetTop dragging = true return false } To handle the mouse move event, I first check whether a dragging operation is going on, and if so, adjust the position of the image to correspond to the mouse pointer, taking into account the location of the mouse in the image, like this: function mouseMove(e) { if (!dragging){ return } var newx, newy if(window.event){ e = window.event } newx = e.clientX - xDown newy = e.clientY - yDown document.getElementById("img1").style.left = newx document.getElementById("img1").style.top = newy return false } Finally, when the mouse goes up, we can stop the drag operation by setting dragging to false : function mouseUp(e) { dragging = false return false } That's all it takes. Here's the whole code: (Listing 17-01.html on the web site)<HTML> <HEAD> <TITLE>Dragging and Dropping</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var xDown, yDown, dragging = false document.onmousemove = mouseMove document.onmouseup = mouseUp function mouseDown(e) { if(window.event){ e = window.event } xDown = e.clientX - document.getElementById("img1").offsetLeft yDown = e.clientY - document.getElementById("img1").offsetTop dragging = true return false } function mouseMove(e) { if (!dragging){ return } var newx, newy if(window.event){ e = window.event } newx = e.clientX - xDown newy = e.clientY - yDown document.getElementById("img1").style.left = newx document.getElementById("img1").style.top = newy return false } function mouseUp(e) { dragging = false return false } //--> </SCRIPT> </HEAD> <BODY> <H1>Dragging and Dropping</H1> <DIV ID="img1" STYLE="POSITION:ABSOLUTE; LEFT:100; TOP:100"> <IMG SRC="image1.jpg" ONMOUSEDOWN="return mouseDown(event)"> </DIV> </BODY> </HTML> You can see the results of this code in Figure 17.1. When you use the mouse, the image follows the cursor smoothly, until you drop the image by releasing the cursor. Figure 17.1. Dragging and dropping an image.
|