Arrastrar y Soltar con JavaScript

#codigo{background:#000;color:#FFF;}

Arrastrar y soltar con JavaScript (Drag And Drop)

Si bien el nuevo HTML5 trea esta funcion pero creo que es necesario conocer el efecto de arrastrar y soltar con javaScript ya que aunque el propio HTML5 lo trea aun asi tenemos que recurir a javaScript para producir dicho efecto de arrastrar y soltar.

Arrastrar y soltar ver ejemplo

Lo que veremos vasicamente en este codigo seran 2 archivos uno HTML el cual contendra nuestras etiquetas html y en en cual se reflejara dicho efecto de arrastrar y soltar con javaScript, tambien vamos a tener otro fichero.js que es el cual tendra las instrucciónes que nos permitira sumular dicho efecto.

Bueno sin mas nada empesemos con nuestro codigo HTML5

Index.html

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″ />
<script src=”arrastra.js” type=”text/javascript”></script>
<title>Atrastrar y soltar con JavaScript</title>
</head>
<div id=”arrastrar”>
<h1>Efecto Arrastrar y soltar con javaScript (Drag And Drop)</h1>
</div>
<body>
</body>
</html>

Si te fijas en el codigo es un documento HTML5 normal simplemente hemos creado la estructura HTML5 del documento porque todo lo otro lo vamos hacer con JavaScript entonces para ello enlazamos un documento javascript con la siguiente linea de codigo dentro de la etiquetas <head></head> que es la siguiente
<script src=”arrastra.js” type=”text/javascript”></script>

Ahora ponemos nuestro documento javaScript el cual realizara el efecto que queremos conseguir en este caso de arrastrar y soltar.

arrastrar.js

addEvent(window,’load’,inicializarEventos,false);
function inicializarEventos(e)
{
  var ob=document.createElement(‘div’);
  var texto=document.createTextNode(‘Arrastrame’);
  ob.appendChild(texto);
  ob.style.textAlign=’center’;
  ob.style.left=’0px’;
  ob.style.top=’0px’;
  ob.style.width=’100px’;
  ob.style.height=’100px’;
  ob.style.border=’solid 5px #DEDEDE’;
  ob.style.opacity=’0.5′;
  ob.style.color=’blue’;
  ob.style.borderRadius=’5px’;
  ob.style.background=’-moz-linear-gradient(#FFF 0%, #DEDEDE 100%)’;
  ob.style.position=’relative’;
  var x=document.getElementsByTagName(‘div’);
  x[0].appendChild(ob);
  var recu1=new Recuadro(ob);
}

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

    addEvent(div,’mousedown’,inicioDrag,false);

    function coordenadaX(e)
    {
      if (window.event)
        return event.clientX+document.body.scrollTop;
      else
        return e.pageX;
    }

    function coordenadaY(e)
    {
      if (window.event)
        return event.clientY+document.body.scrollTop;
      else
        return e.pageY;
    }

    function inicioDrag(e)
    {
      if (window.event)
        e=window.event;
      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;
      addEvent(document,’mousemove’,drag,false);
      addEvent(document,’mouseup’,soltar,false);
    }

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

    function soltar(e)
    {
      if (window.event)
      {
        document.detachEvent(‘onmousemove’,drag);
        document.detachEvent(‘onmouseup’,soltar);
      } 
      else
      {
        document.removeEventListener(‘mousemove’,drag,false);
        document.removeEventListener(‘mouseup’,soltar,false);
      }
    }
}

function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent(‘on’+nomevento,funcion);
    return true;
  }
  else
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

Si te has fijado en el codigo lo que hacemos hecho es crear un div atraves de DHTML y a ese div agregarle varios atributos CSS y atreves del atributo “mousemove” y “mouseup” maanupularlo para conseguir el efecto de arrastrar y soltar.

Deja un comentario

Tu dirección de correo electrónico no será publicada.