Drag and Drop Tutorial

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. Save drag-example.html by going to File > Save As….
  4. Open drag-example.html in Notepad.
  5. 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.
  6. Upload drag-example.html 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