58 - Arrastrar y soltar (drag and drop)



Problema:Definir 3 div con los valores 1,2 y 3. Mostrar un mensaje cuando los tres div estén ordenados de menor a mayor.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
</body>
</html>
window.addEventListener('load',inicializarEventos,false);
var recu1,recu2,recu3;
function inicializarEventos(e)
{
  var ob=document.createElement('div');
  ob.style.left='0px';
  ob.style.top='0px';
  ob.style.width='100px';
  ob.style.height='100px';
  ob.style.background='#f00';
  ob.style.position='relative';
  ob.style.fontSize='80px';
  ob.style.textAlign='center';
  ob.appendChild(document.createTextNode('1'));
  var x=document.getElementsByTagName('body');
  x[0].appendChild(ob);
  recu1=new Recuadro(ob);

  var ob2=document.createElement('div');
  ob2.style.left='0px';
  ob2.style.top='0px';
  ob2.style.width='100px';
  ob2.style.height='100px';
  ob2.style.background='#0f0';
  ob2.style.position='relative';
  ob2.style.fontSize='80px';
  ob2.style.textAlign='center';
  ob2.appendChild(document.createTextNode('2'));
  x[0].appendChild(ob2);
  recu2=new Recuadro(ob2);

  var ob3=document.createElement('div');
  ob3.style.left='0px';
  ob3.style.top='0px';
  ob3.style.width='100px';
  ob3.style.height='100px';
  ob3.style.background='#00f';
  ob3.style.position='relative';
  ob3.style.fontSize='80px';
  ob3.style.textAlign='center';
  ob3.appendChild(document.createTextNode('3'));
  x[0].appendChild(ob3);
  recu3=new Recuadro(ob3);
}


Recuadro=function(div)
{
    var tX=0;
    var tY=0;
    var difX=0;
    var difY=0;

    this.retornarColumna=retornarColumna;

    div.addEventListener('mousedown',inicioDrag,false);


    function coordenadaX(e)
    {
      return e.pageX;
    }

    function coordenadaY(e)
    {
      return e.pageY;
    }

    function inicioDrag(e) 
    {
      var eX=coordenadaX(e);
      var eY=coordenadaY(e);
      var oX=parseInt(div.style.left);
      var oY=parseInt(div.style.top);
      difX=oX-eX;
      difY=oY-eY;
      document.addEventListener('mousemove',drag,false);
      document.addEventListener('mouseup',soltar,false);
    }

    function drag(e) 
    { 
      tX=coordenadaY(e)+difY+'px';
      tY=coordenadaX(e)+difX+'px'
      div.style.top=tX; 
      div.style.left=tY; 
    }
  

    function soltar(e)
    { 
      verificarGano();
      document.removeEventListener('mousemove',drag,false);
      document.removeEventListener('mouseup',soltar,false);
    }
  
    function retornarColumna()
    {
      return parseInt(div.style.left);
    }
}


function verificarGano()
{
  if (recu1.retornarColumna()<recu2.retornarColumna() &&
      recu2.retornarColumna()<recu3.retornarColumna())
    alert('Muy Bien');
}
Ver solución


Retornar