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)
posted 06-14-2012 10:17
