As interfaces gráficas facilitam a vida do usuário… e complicam a do programador. Sou da ideia que a solução de qualquer problema por vias computacionais tem um certo “peso” que precisa ser distribuído hora carregando mais o usuário ora carregando mais a equipe de programação. Quando melhor for o serviço do programador, tanto menos dores de cabeça o usuário vai ter.
Arrastar e soltar é uma daquelas invenções que ajudam tremendamente a vida do usuário (e de alguns programadores) e que podem atrapalhar o programador em alguns casos.
Fieis à filosofia de facilitar a vida do programador, o YeAPF (a partir da versão 0.8.25) disponibiliza no seu lado cliente web, algumas ferramentas que facilitam o uso de dita interface. Observe o exemplo imperfeito seguinte:
<html>
<script src='http://localhost/YeAPF/yloader.js'></script>
<style>
.hightlight {
background: #FFFF98;
}
</style>
<body>
<div droppable='yes'
style='border: solid 1px black; width: 400px; height: 200px; float:left'
id=areaDestino>
Solte os elementos aqui
</div>
<div style='width: 400px; float:left'>
<ul>
<li draggable=yes>Primeira coisa</li>
<li draggable=yes id=coisa2>Segunda coisa</li>
<li draggable=yes id=coisa3>Terceira coisa</li>
</ul>
</div>
</body>
<script>
var areaDestino = document.getElementById('areaDestino');
areaDestino.ondrop = function(aDraggedElement) {
alert("Recebi "+aDraggedElement.innerHTML);
}
areaDestino.ondragover = function(aDraggedElement) {
return aDraggedElement.id!='coisa2';
}
</script>
</html>
Bom, o exemplo é imperfeito porque qualquer um pode ver que não inclui o DOCTYPE nem o HEAD e por ai vai…
O que o programador precisa aprender é o seguinte:
- Todo elemento que possa ser um destino e receber outros elementos sendo arrastados, tem que ter um atributo droppable em yes.
- Todo elemento que possa ser arrastado, tem que ter um atributo draggable em yes.
- Existe um estilo global chamado highlight que será usado para marcar alvos dispostos a receber o elemento arrastado.
- Os elementos destino podem ter duas funções: ondrop() e ondragover(). A ondrop() será chamada na hora do usuário soltar o elemento sobre o destino. E a ondragover() será chamada cada vez que o usuário estiver arrastando um elemento sobre o outro. Ela deve devolver true se o objeto sendo arrastado pode ser jogado sobre o destino.