Drag and Drop Tutorial

Tutorial

  1. Right click on the below files and choose "Save Target As..." to save it to your computer. You must create the images to be dragged and dropped. They are not included in this tutorial.
  2. Unzip wz_dragdrop.zip. For help, see the Unzipping Tutorial.
  3. Open drag.htm in Notepad.
  4. Change the commented parts (anything that starts with <!-- and ends with -->). You do not need to edit the other two files at all.
  5. Find the part of the code that says:
    <!-- IMAGE CODES HERE -->
  6. Copy the below code and paste it after "<!-- IMAGE CODES HERE -->" in drag.htm.
    <img src="URLHERE" name="drag0001">
    <img src="URLHERE" name="drag0002">
    <img src="URLHERE" name="drag0003">
    <img src="URLHERE" name="drag0004">
    <img src="URLHERE" name="drag0005">
    <img src="URLHERE" name="drag0006">
    <img src="URLHERE" name="drag0007">
    <img src="URLHERE" name="drag0008">
    <img src="URLHERE" name="drag0009">
    <img src="URLHERE" name="drag0010">
    <img src="URLHERE" name="drag0011">
    <img src="URLHERE" name="drag0012">
    <img src="URLHERE" name="drag0013">
    <img src="URLHERE" name="drag0014">
    <img src="URLHERE" name="drag0015">
    <img src="URLHERE" name="drag0016">
    <img src="URLHERE" name="drag0017">
    <img src="URLHERE" name="drag0018">
    <img src="URLHERE" name="drag0019">
    <img src="URLHERE" name="drag0020">
    <img src="URLHERE" name="drag0021">
    <img src="URLHERE" name="drag0022">
    <img src="URLHERE" name="drag0023">
    <img src="URLHERE" name="drag0024">
    <img src="URLHERE" name="drag0025">
    <img src="URLHERE" name="drag0026">
    <img src="URLHERE" name="drag0027">
    <img src="URLHERE" name="drag0028">
    <img src="URLHERE" name="drag0029">
    <img src="URLHERE" name="drag0030">
    <img src="URLHERE" name="drag0031">
    <img src="URLHERE" name="drag0032">
    <img src="URLHERE" name="drag0033">
    <img src="URLHERE" name="drag0034">
    <img src="URLHERE" name="drag0035">
    <img src="URLHERE" name="drag0036">
    <img src="URLHERE" name="drag0037">
    <img src="URLHERE" name="drag0038">
    <img src="URLHERE" name="drag0039">
    <img src="URLHERE" name="drag0040">
    <img src="URLHERE" name="drag0041">
    <img src="URLHERE" name="drag0042">
    <img src="URLHERE" name="drag0043">
    <img src="URLHERE" name="drag0044">
    <img src="URLHERE" name="drag0045">
    <img src="URLHERE" name="drag0046">
    <img src="URLHERE" name="drag0047">
    <img src="URLHERE" name="drag0048">
    <img src="URLHERE" name="drag0049">
    <img src="URLHERE" name="drag0050">
    <img src="URLHERE" name="drag0051">
    <img src="URLHERE" name="drag0052">
    <img src="URLHERE" name="drag0053">
    <img src="URLHERE" name="drag0054">
    <img src="URLHERE" name="drag0055">
    <img src="URLHERE" name="drag0056">
    <img src="URLHERE" name="drag0057">
    <img src="URLHERE" name="drag0058">
    <img src="URLHERE" name="drag0059">
    <img src="URLHERE" name="drag0060">
    <img src="URLHERE" name="drag0061">
    <img src="URLHERE" name="drag0062">
    <img src="URLHERE" name="drag0063">
    <img src="URLHERE" name="drag0064">
    <img src="URLHERE" name="drag0065">
    <img src="URLHERE" name="drag0066">
    <img src="URLHERE" name="drag0067">
    <img src="URLHERE" name="drag0068">
    <img src="URLHERE" name="drag0069">
    <img src="URLHERE" name="drag0070">
    <img src="URLHERE" name="drag0071">
    <img src="URLHERE" name="drag0072">
    <img src="URLHERE" name="drag0073">
    <img src="URLHERE" name="drag0074">
    <img src="URLHERE" name="drag0075">
    <img src="URLHERE" name="drag0076">
    <img src="URLHERE" name="drag0077">
    <img src="URLHERE" name="drag0078">
    <img src="URLHERE" name="drag0079">
    <img src="URLHERE" name="drag0080">
    <img src="URLHERE" name="drag0081">
    <img src="URLHERE" name="drag0082">
    <img src="URLHERE" name="drag0083">
    <img src="URLHERE" name="drag0084">
    <img src="URLHERE" name="drag0085">
    <img src="URLHERE" name="drag0086">
    <img src="URLHERE" name="drag0087">
    <img src="URLHERE" name="drag0088">
    <img src="URLHERE" name="drag0089">
    <img src="URLHERE" name="drag0090">
    <img src="URLHERE" name="drag0091">
    <img src="URLHERE" name="drag0092">
    <img src="URLHERE" name="drag0093">
    <img src="URLHERE" name="drag0094">
    <img src="URLHERE" name="drag0095">
    <img src="URLHERE" name="drag0096">
    <img src="URLHERE" name="drag0097">
    <img src="URLHERE" name="drag0098">
    <img src="URLHERE" name="drag0099">
    <img src="URLHERE" name="drag0100">
  7. Determine how many images you will have on the page. If you have less than 100, get rid of some of the lines at the end so that the number after the last name="drag" is the correct number of images.

    If you have more than 100 images, copy the code above and paste it into a new Notepad document. Click at the very beginning of the code and go to Edit > Replace. In the "Find what" box, put drag00 and in the "Replace with" box, put drag01. Once it is finished replacing the lines, change the final line from "drag0100" to "drag0200". Copy all of this code and paste it after the "drag0100" line in the original drag.htm page.

    If you have even more images (ie. more than 200), follow the steps in the above paragraph again, but replace drag00 with drago02. Again, if you end up with more than you need, get rid of the extra lines, starting at the bottom.
  8. Paste the below code and after "<!-- JAVASCRIPT CODE HERE -->" in drag.htm.
    <script type="text/javascript">
    <!--
    SET_DHTML(
    "drag0001", "drag0002", "drag0003", "drag0004", "drag0005", "drag0006", "drag0007", "drag0008", "drag0009", "drag0010", "drag0011", "drag0012", "drag0013", "drag0014", "drag0015", "drag0016", "drag0017", "drag0018", "drag0019", "drag0020", "drag0021", "drag0022", "drag0023", "drag0024", "drag0025", "drag0026", "drag0027", "drag0028", "drag0029", "drag0030", "drag0031", "drag0032", "drag0033", "drag0034", "drag0035", "drag0036", "drag0037", "drag0038", "drag0039", "drag0040", "drag0041", "drag0042", "drag0043", "drag0044", "drag0045", "drag0046", "drag0047", "drag0048", "drag0049", "drag0050", "drag0051", "drag0052", "drag0053", "drag0054", "drag0055", "drag0056", "drag0057", "drag0058", "drag0059", "drag0060", "drag0061", "drag0062", "drag0063", "drag0064", "drag0065", "drag0066", "drag0067", "drag0068", "drag0069", "drag0070", "drag0071", "drag0072", "drag0073", "drag0074", "drag0075", "drag0076", "drag0077", "drag0078", "drag0079", "drag0080", "drag0081", "drag0082", "drag0083", "drag0084", "drag0085", "drag0086", "drag0087", "drag0088", "drag0089", "drag0090", "drag0091", "drag0092", "drag0093", "drag0094", "drag0095", "drag0096", "drag0097", "drag0098", "drag0099", "drag0100"
    );
    //-->
    </script>
  9. Following the same method as above, add or remove the "drag"s so that the are as many "drag"s as there are images. Note that the final "drag" has no comma after it.
  10. Replace all the "URLHERE"s 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.
  11. 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