DOC PREVIEW
CSUDH TBE 540 - Customizing Drag-and-Drop.html

This preview shows page 1 out of 2 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 2 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 2 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

Customizing Drag-and-Drop.htmlCustomizing Drag-and-Drop.htmlEven 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 ownuse. image[1] image[2] image[3] image[4]IN THE HEAD SECTION:<script language="JavaScript1.2">function checkIt(){var tablePosX=new Array (4) Assumes 4 boxestablePosX[0]=0 in a table that istablePosX[1]=200 800 pixels wide, withtablePosX[2]=400 200 pixels in each box.tablePosX[3]=600var rightAns=new Array(4) Again, 4 boxes.rightAns[0]=2 This tells which imagerightAns[1]=3 SHOULD go in each box.rightAns[2]=1 The red ? is image[0], rightAns[3]=4 so the rest are 1 through 4.var posX=new Array(4) Assumes 4 images thatvar posY=new Array(4) move.for (var i=1;i<=4;i++) This loop gets the{ left and top ofposX[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 fromif (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;"


View Full Document

CSUDH TBE 540 - Customizing Drag-and-Drop.html

Download Customizing Drag-and-Drop.html
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Customizing Drag-and-Drop.html and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Customizing Drag-and-Drop.html 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?