Topic: Basic interactive "game" using javascript! (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=32631" title="Pages that link to Topic: Basic interactive &amp;quot;game&amp;quot; using javascript! (Page 1 of 1)" rel="nofollow" >Topic: Basic interactive &quot;game&quot; using javascript! <span class="small">(Page 1 of 1)</span>\

 
asylum_seeker
Obsessive-Compulsive (I) Inmate

From: inside your mind
Insane since: Jun 2012

IP logged posted posted 06-14-2012 10:17 Edit Quote

Hello to all the insane forum members, this is my first post.

Can anyone care to help out?

Need help on the following features:

1A) clean up all the code so it has a better CSS

1B) create a better/efficient code for the gap between the 2 rows of images.
currently using paragraph breaks etc which is primitive code but Im only limited to self-taught in code design.
Note the code for the gap must allow also allow the option/possibility of putting in an iFrame for another page if required.

2A) need to modify the Drag n Drop script to allow images to be dragged onto other images in any rows of tables where onDrop a new image loads up replacing both the original image and the image that was Drag n Dropped.

2B) optional the thumbnail position from which the Drag n Dropped image originated from must load another image that signifies (notifies the user/viewer) it has been moved. Or some code which changes the color of the original thumbnail position.

3) <div id="div16" thumbnail is set to > draggable=false > though if you click onto it to test if its draggable the image changes color. Is there a better code that can be added which can prevent that little bug for all images set to false?

Any help with listing links to helpful code that I require will be appreciated 1000 times.

Here is the code

<head>

<style type="text/css">
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14, #div15, #div16, #div17, #div18, #div19, #div20
{float:left; width:63px; height:87px; margin:1px;padding:1px;border:1px solid #aaaaaa;}
</style>

<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data ));
ev.preventDefault();
}
</script>

</head>

<body>

<div style="text-align:center;">

<table bgcolor="#000000" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/1.png" draggable="true" ondragstart="drag(event)" id="drag1" width="63" height="87"></div></td>
<td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/2.png" draggable="true" ondragstart="drag(event)" id="drag2" width="63" height="87"></div></td>
<td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/3.png" draggable="true" ondragstart="drag(event)" id="drag3" width="63" height="87"></div></td>
<td><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/4.png" draggable="true" ondragstart="drag(event)" id="drag4" width="63" height="87"></div></td>
<td><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/5.png" draggable="true" ondragstart="drag(event)" id="drag5" width="63" height="87"></div></td>
<td><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/6.png" draggable="true" ondragstart="drag(event)" id="drag6" width="63" height="87"></div></td>
<td><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/7.png" draggable="true" ondragstart="drag(event)" id="drag7" width="63" height="87"></div></td>
<td><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/8.png" draggable="true" ondragstart="drag(event)" id="drag8" width="63" height="87"></div></td>
<td><div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true" ondragstart="drag(event)" id="drag9" width="63" height="87"></div></td>
<td><div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/10.png" draggable="true" ondragstart="drag(event)" id="drag10" width="63" height="87"></div></tr>

<td><div height="110"><p><br><p><br><p><br></div></tr>

<td><div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/7.png" draggable="true" ondragstart="drag(event)" id="drag11" width="63" height="87"></div></td>
<td><div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true" ondragstart="drag(event)" id="drag12" width="63" height="87"></div></td>
<td><div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/5.png" draggable="true" ondragstart="drag(event)" id="drag13" width="63" height="87"></div></td>
<td><div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/1.png" draggable="true" ondragstart="drag(event)" id="drag14" width="63" height="87"></div></td>
<td><div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/11.png" draggable="true" ondragstart="drag(event)" id="drag15" width="63" height="87"></div></td>
<td><div id="div16" ondrop="drop(event)"><img src="i/12.png" draggable="false" ondragstart="drag(event)" id="drag16" width="63" height="87"></div></td>
<td><div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/2.png" draggable="true" ondragstart="drag(event)" id="drag17" width="63" height="87"></div></td>
<td><div id="div18" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true" ondragstart="drag(event)" id="drag18" width="63" height="87"></div></td>
<td><div id="div19" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/4.png" draggable="true" ondragstart="drag(event)" id="drag19" width="63" height="87"></div></td>
<td><div id="div20" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/3.png" draggable="true" ondragstart="drag(event)" id="drag20" width="63" height="87"></div></tr>
</tr>
</table>
</center>

<p><br>

</body>

Below is a link to my zip file containing all of my test files and all the images which are not provided in the code listed above

http://www.codingforums.com/attachment.php?s=84390ffec74ed136e3998d2e7116b8de&attachmentid=11206&d=1337873829

Scroll down to the bottom of that page and lookout for attached file: drag_n_drop_2.zip
drag_n_drop_2.zip is file is the latest version of my project.

Enjoy the insanity!

(Edited by asylum_seeker on 06-14-2012 10:22)



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu