Ajax e DHTML

Finalmente vou postar algo realmente explicativo sobre Drag and Drop.
Primeiramente veja esse exemplo que será explicado: Quebra Cabeça.
Pra começar, vou colocar a uma div que contém a chamada as funções que captura os eventos sobre ela.

<div id="objeto1" class="normal" 
 style="top:100px;left:100px;width:100px;height:100px;"
 onmousedown="drag(this)"
 onmouseup="drop(this)">
 1
</div>

Foram criada 2 funções: drag(objeto) e drop(objeto)
Além destas existe uma outra que irá capturar os movimentos do mouse e fara o mouse.
<
A função drag() irá armazenar na variavel objetoDrag o nome do elemento atual que está sendo movimentado:

function drag(obj1){
 //Captura as posições iniciais do objeto
 var posLeft = obj1.style.left;
 posLeft = posLeft.substr(0, posLeft.length - 2);
 var posTop = obj1.style.top;
 posTop = posTop.substr(0, posTop.length - 2);
 
 //Guardar em uma variavel previamente criada
 inicioX = parseInt(posLeft) - vX;
 inicioY = parseInt(posTop) - vY;
 
 //Coloca o elemento sobre todos os outros
 obj1.style.zIndex = 2;
 
 //Guarda o id do objeto na variavel objetoDrag
 objetoDrag = obj1.id;
}

Agora apresento a função drop(), que é chamada quando se solta o objeto:

function drop(obj1){
 //Guarda o ultimo elemento a ser movido
 objetoOld = objetoDrag;
 //Limpa a variavel de controle
 objetoDrag = "";
 
 //Captura as posições iniciais do objeto
 var posLeft = obj1.style.left;
 posLeft = posLeft.substr(0, posLeft.length - 2);
 var posTop = obj1.style.top;
 posTop = posTop.substr(0, posTop.length - 2);
 
 //Calculo o ponto que foi solto para 
 // encaixar na tela
 posLeft = Math.round(parseInt(posLeft)/sizeCubo)
                   *sizeCubo;
 posTop = Math.round(parseInt(posTop)/sizeCubo)
                   *sizeCubo;
 
 //Determina a posição do elemento
 obj1.style.top = posTop + "px";
 obj1.style.left = posLeft + "px";
 obj1.className = "normal";
 
 //Retorna o elemento como mesmo nivel dos demais.
 obj1.style.zIndex = 1;
 fora = true;
 sumX = 0;
 sumY = 0;
}

A função moveobj() que recebe o movimento do mouse

function moveobj(e){
 //Verifica se a variavel "e" é vázia
 //Atribuindo assim o evento do mouse na janela
 //Isso é feito para tratar o IE
 if (!e) e = window.event;
 
 //Captura a posição X e Y do mouse
 vX = e.clientX;
 vY = e.clientY;

 //Verifica se há algum objeto sendo "carregado"
 if (objetoDrag != ""){
  //Caso tenha, é modificado a classe do CSS para
  // ganhar características próprias
  $(objetoDrag).className = "normal alpha1";
  
  //Muda o posicionamento do objeto
  // lembrando que estou usando a biblioteca prototype
  // mas daria pra usar o método getElementById
  $(objetoDrag).style.top = vY + inicioY + "px";
  $(objetoDrag).style.left = vX + inicioX + "px";
 }
}

/*Por fim, é colocado o método moveobj() 
vinculado com o evento onmousemove do documento*/
document.onmousemove=moveobj;

No projeto final eu coloquei algumas coisas a mais, como gerar as DIVs de forma automática e separár a figura em partes no CSS.
Qualquer coisa olhe o código para entender o que foi feito, procurei comentar todos os passos.

Quebra cabeça

Marcadores: ajax, arrastar, dhtml, drag, drop, mouse, mover, puzzle, quebra cabeça