|
|
|
|
Drag and Drop Elements for Internet Explorer
|
Have you ever seen sites that let you move words around as if they were refrigerator magnets? Have you wondered how they did that?
With the java script on this page you can create your own interactive activities for your students to use! These scripts are from DynamicDrive.com . There you will find several other scripts that you may use free.
Follow the directions below to make a webpage with movable parts in your activities.
1. Create a new webpage using an HTML editor such as Dreamweaver.
2. Put the following script into the <HEAD> section of your page by highlighting the code below and then copying and pasting it into your webpage.
<style>
<!--
.drag{position:relative;cursor:hand}
--></style>
<script language="JavaScript1.2">
<!--/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
3. Your html code should look like the one below:
<html>
<head>
<!--drag engine code from step 2 installed here-->
</head>
<body>
<img src="test.gif"><br>
<img src="test2.gif"><br>
<b>"Hi there</b>
</body>
</html>4. To make your images "move about", just add the class="drag" after the name of the image that you put in quotes. Your html code should look like the following example.
<html>
<head>
<!--drag engine code installed here-->
</head>
<body>
<img src="test.gif" class="drag"><br>
<img src="test2.gif" class="drag"><br>
<h1><b>"Hi there</b></h1>
</body>
</html>
Try
these out!
This is the code used for the above graphics.
<p>Try these out! <br>
<br>
<img src="left.gif"class="drag"><img src="i4c_round.gif" class="drag" width="72" height="72"></p>
5. To make your text "move about" just add <b class="drag"> right in front of the text. Look at the example below.
<h1><b class="drag">Hi there</b></h1>
</body>
6. Now to try it out!
Here is the script in the code source.
<td>
<h1> <b class="drag">Can </b></h1>
<td>
<h1><b class="drag">a</b></h1>
<td>
<h1> <b class="drag">you </b></h1>
<td>
<h1> <b class="drag">sentence </b></h1>
<td>
<h1> <b class="drag">make</b></h1>
<td>
<h1> <b class="drag">?</b></h1>
<td>
</td>
Drag and drop the words to create a sentence.
Can
a
you
sentence
make
?
|
Custom Search
| Visitors since November 2000 |
Return to Internet4Classrooms home
