Dragging and Dropping Visual Elements


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.

graphics/17fig01.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net