Drag and Drop - mover e arrastar divs e elementos
Prosseguindo com alguns códigos que uso sempre, abaixo mostro um drag-n-drop feito pelo tmferreira e corrigido por mim. Logicamente serve pra arrastar e mover elementos, divs, etc.
Uso ele quando não to afim de usar libs completas como o jquery.
Vou deixar direto o código completo até com o exemplo de uso. É só salvar o conteúdo abaixo como um arquivo HTML qualquer e testar. Pra ativar o drag-n-drop nos seus elementos e páginas, é só entender o exemplo e chamar a função dragdrop para os elementos que desejar.
<script>
//drag n drop de div ----------------------------------------------------
//by tmferreira - http://www.webly.com.br/tutorial/javascript-e-ajax/7045/drag-and-drop.htm
//corrigida 30/01/2008 por Micox - http://forum.ievolutionweb.com/index.php?s=&showtopic=7045&view=findpost&p=139679
var objSelecionado = null;
var mouseOffset = null;
function addEvent(obj, evType, fn) {
//Função adaptada da original de Christian Heilmann, em
//http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
if (typeof obj == "string") {
if (null == (obj = document.getElementById(obj))) {
throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
}
}
if (obj.attachEvent) {
return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
return obj.addEventListener(evType, fn, true);
} else {
throw new Error("Seu browser não suporta adição de eventos. Senta, chora e pega um navegador mais recente.");
}
}
function mouseCoords(ev){
if(typeof(ev.pageX)!=="undefined"){
return {x:ev.pageX, y:ev.pageY};
}else{
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
}
function getPosition(e, ev){
var ev = ev || window.event;
if(e.constructor==String){ e = document.getElementById(e);}
var left = 0, top = 0;
var coords = mouseCoords(ev);
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x: coords.x - left, y: coords.y - top};
}
function dragdrop(local_click, caixa_movida) {
//local click indica quem é o cara que quando movido, move o caixa_movida
if(local_click.constructor==String){ local_click = document.getElementById(local_click);}
if(caixa_movida.constructor==String){ caixa_movida = document.getElementById(caixa_movida);}
local_click.style.cursor = 'move';
if(!caixa_movida.style.position || caixa_movida.style.position=='static'){
caixa_movida.style.position='relative'
}
local_click.onmousedown = function(ev) {
objSelecionado = caixa_movida;
mouseOffset = getPosition(objSelecionado, ev);
};
document.onmouseup = function() {
objSelecionado = null;
}
document.onmousemove = function(ev) {
if (objSelecionado) {
var ev = ev || window.event;
var mousePos = mouseCoords(ev);
var pai = objSelecionado.parentNode;
objSelecionado.style.left = (mousePos.x - mouseOffset.x - pai.offsetLeft) + 'px';
objSelecionado.style.top = (mousePos.y - mouseOffset.y - pai.offsetTop) + 'px';
objSelecionado.style.margin = '0px';
return false;
}
}
}</script>
<body>
<!-- esta é a div de exemplo que será movida ao clicar no p de borda azul -->
<div id='movido' style='border: 1px solid black; width: 200px; '>
<p id='movedor' style='border: 1px solid blue;'>mova</p>
sou a div lálalá
<br />
lálálá
</div>
<!-- aqui o script chamando a função que ativa o drag'n'drop -->
<script>
dragdrop('movedor','movido');
</script>
</body>
Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.
Julho 25th, 2008 18:08
Faltou um exemplo da página com o resultado do código
Julho 25th, 2008 18:14
opa foi mal já tem o exemplo de como se usa o codigo no final!Legal, mas quando vc clica e vai mover da primeira vez ele tá dando um pulinho
Julho 28th, 2008 22:12
pô cara vc é um anjo msm kkk era exatamento isso que estava procurando
!!! vlw
Agosto 12th, 2008 06:12
Legal o código, é possivel quardar as posições das divs?
Seria interessante para mim usar no meu projeto que o usuario administrador ajustase as DIV aonde ele quisesse e guardase. E os usuario finais apenas via a posição exata sem a opção de mexer.
parabéns
Agosto 12th, 2008 12:11
Caro Micox, eu e mais dois loucos resolvemos ter como trabalho final da graduação a concepção de um modelador ER para web. Estivemos olhando algumas soluções isoladas para o desenvolvimento do mesmo, e essa é uma delas. Está muito bom por sinal.
Qq contribuição é bem vinda.
Um abraço e parabéns, é de pessoas como vc que a área de informática precisa.
Agosto 25th, 2008 14:33
Com mais de uma div, o movimento fica deslocado. Apenas dupliquei as divs, renomiei e usei
dragdrop(’movedor’,'movido’);
dragdrop(’movedor2′,’movido2′);
dragdrop(’movedor3′,’movido3′);
Agosto 25th, 2008 17:09
É… Realmente tem este problema. É que usa apenas 1 variável global.