Já prevejo o SC futuramente…usando isso:
HTML 5 tem muita coisa interessante para incorporar na ferramenta.
A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable=”true” num elemento o torna arrastável. E há uma série de eventos que você pode tratar. Os eventos do objeto sendo arrastado são:
Dragstart: O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado;
Drag: O objeto está sendo arrastado;
Dragend: A ação de arrastar terminou O objeto sobre o qual outro é arrastado sofre os seguintes eventos:
Dragenter: O objeto sendo arrastado entrou no objeto target;
Dragleave: O objeto sendo arrastado deixou o objeto target;
Dragover: O objeto sendo arrastado se move sobre o objeto target;
Drop: O objeto sendo arrastado foi solto sobre o objeto target.
A ação padrão do evento dragover é cancelar a ação de dragging atual. Assim, nos objetos que devem receber drop, é preciso setar uma ação de dragover com, no mínimo, return false.
Seleções de texto são automaticamente arrastáveis, não precisam do atributo draggable. E se você quiser criar uma área para onde seleções de texto possam ser arrastadas, basta tratar esses mesmos eventos.
Por fim, todas funções de tratamento de evento de drag recebem um objeto de evento que contém uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operação de drag.
Confira na sequência um exemplo completo de demonstração desta nova funcionalidade do HTML5:
<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8” http-equiv=”content-type”/>
<title>Demonstração do Drag and Drop</title>
<style type=”text/css”>
#boxA, #boxB {
float:left; width:100px; height:200px; padding:10px; margin:10px;
font-size:70%;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }
#drag, #drag2 {
width:50px; padding:5px; margin:5px; border:3px black solid;
line-height:50px;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
</style>
<script type=”text/javascript”>
// Quando o usuário inicia um drag, guardamos no dataset do evento
// o id do objeto sendo arrastado.
function dragStart(ev) {
dataTransfer.setData(“ID”, ev.target.getAttribute(‘id’));
}
// Quando o usuário arrasta sobre um dos painéis, retornamos
// false para que o evento não se propague para o navegador, o
// que faria com que o conteúdo fosse selecionado.
function dragOver(ev) { return false; }
// Quando soltamos o elemento sobre um painel, movemos o
// elemento, lendo seu id do dataset do evento.
function dragDrop(ev) {
var idelt = ev.dataTransfer.getData(“ID”);
target.appendChild(document.getElementById(idelt));
}
</script>
</head>
<body>
<!– Painel 1 –>
<div id=”boxA”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
<!– Draggable 1 –>
<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”>drag me</div>
<!– Draggable 2 –>
<div id=”drag2” draggable=”true”
ondragstart=”return dragStart(event)”>drag me</div>
</div>
<!– Painel 2 –>
<div id=”boxB”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>
</body>
</html>
Créditos: http://www.scriptcase.com.br/blog/drag-and-drop-html5/