Esse post é continuação de Drag and Drop – Parte 1.

Nessa segunda parte sobre Drag and Drop, vou explicar como “soltar” os objetos, como prometido no post anterior. Ficou curioso? Então vamos ao trabalho.

Antes de começar, vamos tomar como exemplo uma lixeira: devemos carregar itens para dentro dela. Simples, não acha? Pois é, se você respondeu “sim”, ledo engano.
Como estamos carregando um item, ele ess carregando um item, ele está sempre diretamente abaixo do ponteiro do mouse. Desse modo, é impossível disparar um evento de mouse (mouseup, mousedown, mouseover…) em qualquer elemento da página. Se você carregar um item para uma lixeira, o mouse ainda estará acima do elemento, e não da lixeira.
Existem algumas maneiras para resolver o problema, muito fáceis até. O problema da maioria delas é o mesmo: estética. Não mover o elemento até que o mouse seja soltado, colocar o elemento logo abaixo do ponteiro, entre outras coisas não muito bonitas de se ver.
Mas pra tudo existe uma solução. Difícil, mas é uma boa solução. O plano é o seguinte: vamos criar uma lista de todos os alvos. Não vamos atirar em ninguém, esses alvos serão os lugares onde os itens podem ser largados. Quando o botão do roedor eletrônico for soltado, checaremos a posição do mouse e a posição de cada alvo, para sabermos se o ponteiro está em cima de algum desses alvos.
Vamos ao código:

/*
Ainda precisamos de todo o código dos exemplos anteriores,
com exceção da função mouseUp (substituída agora)
*/

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i < dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);

		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
// Aqui executamos a ação desejada.
		}
	}

	dragObject   = null;
}

Usamos assim: definimos um alvo com a função addDropTarget, assim como makeDraggable de antes. Quando soltamos o mouse, a função mouseUp checa a posição de cada alvo e a posição do mouse, e então executa a ação que precisamos.
Tudo OK, tudo prontinho. É claro que o resto é criatividade: containers, organização de dados, alguma coisa pra ser carregada pela sua página, ou qualquer outra bugiganga sem muita utilidade. Até!

Este texto é uma versão do original, How to Drag and Drop in JavaScript.