Customizing Drag and Drop html Even though Drag and Drop html uses VERY complex JavaScript for moving the images there are only a few changes that need to be made to adapt the page for your own use image 1 image 2 image 3 image 4 IN THE HEAD SECTION script language JavaScript1 2 function checkIt var tablePosX new Array 4 tablePosX 0 0 tablePosX 1 200 tablePosX 2 400 tablePosX 3 600 Assumes 4 boxes in a table that is 800 pixels wide with 200 pixels in each box var rightAns new Array 4 rightAns 0 2 rightAns 1 3 rightAns 2 1 rightAns 3 4 Again 4 boxes This tells which image SHOULD go in each box The red is image 0 so the rest are 1 through 4 var posX new Array 4 Assumes 4 images that var posY new Array 4 move for var i 1 i 4 i This loop gets the left and top of posX i document images i offsetLeft each image posY i document images i offsetTop for var k 0 k 4 k Assumes 4 images var rt rightAns k var diff parseInt posX rt parseInt tablePosX k if diff 0 diff diff 1 place k 1 If it s less than 50 pixels from if diff 50 the corner of the right box OK alert BOX place YES You can change the else messages alert BOX place NO script IN THE BODY SECTION div name pix Put in the names of your pics img alt src bat jpg style width 150px height 130px class drag nbsp nbsp nbsp nbsp img alt src cat jpg style width 150px height 160px class drag nbsp nbsp nbsp nbsp nbsp nbsp img alt src hat jpg style width 150px height 125px class drag nbsp nbsp nbsp img alt src rat gif style width 150px height 80px class drag br div
View Full Document
Unlocking...