Ajax e DHTML

A biblioteca Prototype provê uma série de funcionalidade úteis para o dia-à-dia.
Vários desses métodos são uma representação mais fácil de métodos já existentes no JavaScript, com exceção do método $ que identifica os elementos do DOM com algumas funcionalidades a mais.
Estes métodos são simples, de fácil memorização e mais úteis que os existentes no JavaScript.
O mais utilizado é o $(), não só por você, mas todo o código da Prototype usa esse método repetidadamente pois é de grande ajuda para encontrar ID de elementos. Muitos usam ele simplesmente como um substituto da função document.getElementById, mas existem muito mais funcionalidade do que isso.
A partir dele apareceram outros métodos que fazem parte do grupo de úteis conforme abaixo (Estarei explicando cada um desses métodos nos próximos posts):

$()
Não é a toa que é o mais utilizado dos métodos. Além da sua simplicidade, é possível economizar muitas linhas (ou colunas) de código somente utilizando ele.
Ele pode retornar um simples elemento ou um array contendo os elementos que satisfaçam ao informado.

$(id | element) -> HTMLElement
$((id | element)...) -> [HTMLElement...]

Pode ser informada uma String ou um elemento, sendo que o retorno é um Elemento HTML, nos padrões da DOM.

$$()
Este elemento serve para coletar através de uma definição de CSS os elementos que a utilizam, retornando uma lista de elementos que utilizam a regra informada.

$$(cssRule...) -> [HTMLElement...]

$A()
Recebe um objeto contendo uma lista que pode ser enfileirada e retorna um array.

$A(iterable) -> actualArray

$F()
Uma boa sacada pra quem quer acessar valores em formulários sem se preocupar com o tipo de objeto. É passado o objeto correspondente e ele retorna o valor do objeto.

$F(element) -> value

Esse método simplifica o método Form.Element.getValue() da Prototype.

$H()
Cria um HashMap (um array com chaves que referenciam ao item do objeto).
Com o gerador de hash vc passa um objeto e ele vai retornar o array com chaves, quando tentar acessar o valor de um atributo que não exista ele retornará nulo e não dará erro.

$H([obj]) -> Hash

$R()
Cria um novo objeto ObjectRange. Este método cria uma facilidade por substituir o construtor do ObjectRange (veremos depois pra que serve) por $R.

$R(start, end[, exclusive = false]) -> ObjectRange

$W()
Divide uma String e gera um array com as partes geradas, identificando os espaços em branco como delimitador da String.

$w(String) -> Array

Try.these
Testa a execução de uma lista de funções retornando a primeira que foi bem executada (sem erro).

Try.these(Function...) -> firstOKResult

document.getElementsByClassName
Você segue padrões utilizando classes de CSS? Seus problemas acabaram, com essa função você acessa todos os elementos HTML que utilizam a classe informada como parâmetro.

document.getElementsByClassName(className[, element]) -> [HTMLElement...]

O element, se informado, determina que somente será verificado os elementos que estão dentro de element.

Comecei aqui uma série de tutoriais explicativos da prototype, em breve vou detalhar cada um desses métodos úteis e colocar alguns exemplos.

Marcadores: ajax, DOM, Facilidade, JavaScript, Métodos, Prototype, Tutorial, Uteis

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