Drag and Drop Tutorial


Note: You must create the images to be dragged and dropped. They are not included in this tutorial.

  1. Download wz_dragdrop.zip from Walter Zorn's website.
  2. Unzip wz_dragdrop.zip. It includes wz_dragdrop.js and transparentpixel.gif). For help, see the Unzipping Tutorial.
  3. Go to drag-example.php. In the address, change num=20 to the number of images you will have on the page.
  4. Save drag-example.php as drag.htm by going to File > Save As….
  5. Open drag.htm in Notepad.
  6. Replace all the places that say URLHERE with the filenames of your images. If you have a lot of images, it's best to name them all something like:
    • blinkie-a.gif
    • blinkie-b.gif
    • blinkie-c.gif
    • blinkie-d.gif
    • blinkie-e.gif
    • etc
    That way, if you go to Edit > Replace, you can replace all "URLHERE"s with "blinkie-.gif", then just add the letter after the underscore in each line, instead of having to write out "blinkie" on each line.
  7. Upload drag.htm and the other two files to your website. You also need to upload the images you will be using on the page.

Drag and Drop Example