DISQUETES Que se generan segun la cantidad y se mueven. Plus Cookies
Copia y pegarlo en tu editor de texto y dale formato .html y ejecuta para verlo mejor .
<html><head>
<title>Mover elementos de una página web con JavaScript</title>
<style type="text/css">
.objMovible{position:absolute;cursor:pointer;z-index:9999999}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
var sitios = new Array();
var cantiDiscos;
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function genearar(dato){
var x = Math.floor((Math.random() * innerWidth) + 1);
var y = Math.floor((Math.random() * innerHeight) - 1);
zona.innerHTML +="<div id='n"+dato+"' class='objMovible' style='left:"+x+"px;top:"+y+";'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDoCfHL9qupZfGa8IFExmQto467ic1bDV4W0NKgjqpSf7bVbeKZ-OpBWdlMUOw_3EmsyCCTfI-dhp2ErhUQ08qp62fGcY1G8lspAgJTYx7gDoGFQXPrrQaOSB2XlAZbxCou5Ptl-MKz0/s256-no/' onclick='borrar("+dato+")' height='20' width='20' style=' z-index:10;position: relative; left: 24px;top:-41px'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQmpRR2YB5xjdwt5667OKNtkwmGOgyZpJS8T9B7B6-eWyCS7BLc3fadmQJO7xEr-D_LjD0E0NH_FdtSThOvw3gQPxtA_N3P46fCkmc3kGWBhZN2VO0QUwh4HSE30Xa40seSC5maThlDA/s64-no/' height='60' width='60' style=' z-index:5' /></div>";;
}
function cuantasSon(){
zona.innerHTML ="";
var cantidad = numero.value;
cantiDiscos = cantidad;
for(var i=0;i<cantidad;i++)
genearar(i);
}
function borrar(dato){
$("#n"+dato+" img").hide(1500);
$("#n"+dato+" img").text("");
numero.value -=1;
cantiDiscos = numero.value;
}
//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;
//CODIGO AÑADIDO
var desplazaX=-1;
var desplazaY=-1;
function arrastrarRaton(e){
if (estoyArrastrando) {
newLeft = moz ? e.clientX : event.clientX;
newTop = moz ? e.clientY : event.clientY;
//CODIGO COMENTADO
//dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
//dobj.style.top = newTop - parseInt(dobj.style.height)/2;
//CODIGO AÑADIDO
dobj.style.left = newLeft - desplazaX;
dobj.style.top = newTop - desplazaY;
dobj.style.left = newLeft - e.offsetLeft;
dobj.style.top = newTop - e.offsetTop;
return false;
}
}
function soltarBoton(e) {
estoyArrastrando = false;
}
function presionarBoton(e) {
//Obtenemos el elemento sobre el que se ha presionado el botón del ratón
var fobj = moz ? e.target : event.srcElement;
// Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
// que pertenezca a la clase objMovible.
while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
fobj = moz ? fobj.parentNode : fobj.parentElement;
}
// Si hemos obtenido un objeto movible...
if (fobj.className == "objMovible") {
//CODIGO AÑADIDO
e = (e) ? e : event;
desplazaX=e.clientX-parseInt(fobj.style.left);
desplazaY=e.clientY-parseInt(fobj.style.top);
// Activamos el flag para indicar que se empieza a arrastrar
estoyArrastrando = true;
// Guardamos un puntero al objeto que se está moviendo en la variable global
dobj = fobj;
// Devolvemos false para no realizar ninguna acción posterior
return false;
}
}
document.onmousedown = presionarBoton;
document.onmouseup = soltarBoton;
document.onmousemove = arrastrarRaton;
function almacenarCantidad(){
setCookie("cantidad",cantiDiscos ,365);
}
function cargarCookie() {
var total = getCookie("cantidad");
numero.value = total;
cantiDiscos = numero.value;
for(var i=0;i<total;i++)
genearar(i);
}
</script>
</head>
<body onunload="almacenarCantidad()" onload="cargarCookie();">
<form action="#" method="post" />
<input type="number" name="cantidad" value="0" id="numero"/>
<input type="button" value="Genera Disco" onclick="cuantasSon()"/>
</form>
<div id="zona" style='height:200px; width=200px; z-index:99999;' >
</div>
</body>
</html>
Comentarios