Create an effect in javascript

JavaScript
1

Good afternoon, this is my first post.

I am studying javascript and I thought to use the same effect found in the iPad iBooks.

It is a shelf (static object, even just an image), but when you buy a book you can put this shelf. You can also drag it, change the shelf and everything else just like a real bookshelf in the house of people.

Thank you.

Carlos Paiva

2 
  
<html>
<html>
<head>
<meta charset="utf-8">
<title>hat sanat&#305; örnekleri</title>
<style type="text/css">
#duvar {position: absolute;top:0px; left: 0px;}
#duvar td  { width: 161px; height: 100px;border: 5px solid gold; text-align: center; vertical-align: top;}
/*http://www.w3schools.com/css/css_table.asp*/
#pano {position: absolute;top:350px; left: 0px; }
img { width: 161px; height: 100px;  }

</style>
</head>
<body>
<table id="duvar">
<tr>
<td> o </td>
<td> o </td>
<td> o </td>
<td> o </td>
<td> o </td>
</tr>
</table>


<div id="pano"> <h3>click images</h3>
<span>
<img  src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
</span>
<span>
<img src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzy&#305;ldan Figüratif bir Osmanl&#305; Hat Sanat&#305; Örne&#287;i">
</span>
<span>
<img src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
</span>
<span>
<img src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Y&#305;ld&#305;z : Bismillahirrahmanirrahim_   Hilal : La ilehe illallah muhammedür rasullah">
</span>
<span>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQt47W1_aYnNfBfYqOLiaotnc8PHXXDPduNk76F6uxPqetP8K9BpQ" alt="besmele">
</span>
<span>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSA5k-EGh_WH-v-qyOaBfYHRaKwK9WGENkzOh_-8Ip-g0VJWNgwCwg" alt="simetrik besmele">
</span>
<span>
<img src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="hat ile Allah yaz&#305;s&#305;">
</span>
<span>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTdW2IUtlwY2ebN87Pv74cYukIwLwx9MQ6b97-ybKKErtI8zO_6" alt="besmele armut">
</span>
<span>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRPDR-1C3O0kPbbuSBFGWCdc2yMTtVKUipPH6bqnTOvAiDodhkE" alt="besmele tu&#287;ras&#305;">
</span>
<span>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQtGzNfHNqHNPaJE8ei5U_QnexxeV2bUKlxmK6GL6Ai1n7zcOgIbw" alt="">
</span>
</div>

<script type="text/javascript">
// http://www.sitepoint.com/forums/showthread.php?809776-Create-an-effect-in-javascript&

var A = [0,1,2,3,4];
var B = [], r;
var L = A.length;
for(var i=0; i< L; i++) {
r = Math.floor(Math.random() * A.length );
B[B.length]= A[r];
A.splice(r,1);    //  http://www.w3schools.com/jsref/jsref_splice.asp
}
// alert(B);

var n=0;
// resimleri duvara as
function duvaraAs(resim) {

var el= document.getElementById('duvar');
var td = el.getElementsByTagName('td');
//td[B[n]].innerHTML += resim.parentNode.innerHTML;
td[B[n]].innerHTML = resim.parentNode.innerHTML;
//resim.parentNode.innerHTML="";

n++;
if(n== B.length) {n=0; }
}

function imageClick() {
    duvaraAs(this);
}

var images = document.getElementsByTagName('img'),
    i;
for (i = 0; i < images.length; i += 1) {
	images[i].onclick = imageClick;
}

</script>

</body>
</html>

search google
drag and drop javascript

3

I’m sorry because I was on vacation and came back today. His response is brilliant. Will look into the best implementations that I can give.

Again, thanks a lot.