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>
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
POw, bacana! Vou testar.
ResponderExcluirE olha q várias vezes não tem mesmo necessidade de usar alguma biblioteca inteira para fazer o dnd... além do que, é sempre bom entender como funciona esse procedimento!
Bacana :)
Fã de javascript não podia deixar de comentar ...rs
ResponderExcluirLegal seu post, eu tb utilizo muito a library do yahoo! yui e tb scriptaculous junto com prototype. JQuery tb é legal.
Agente tem que tomar cuidado quando for utilizar algumas em conjunto ... (=P)
...depois eu volto!
é muito bom. e se na vez de arrastar o objecto eu preferir copiar esse para outro local, ficando com 2 iguais?
ResponderExcluirParabens pelo seu post.
ResponderExcluirPesquisei na internet inteira sobre drop e todos que tinham, não funcionavam direito em todos navegadores, e o seu, é perfeito...
Valew
seu post me deu motivação para fazer a minha prórpia janela :D vlws e lembre-se UM DIA SEREI O REI DO JS
ResponderExcluirAjudou bastante. Muito obrigada
ResponderExcluirMuito bom o post! Agora sem querer abusar, como eu faria com mais de 1 div?
ResponderExcluirJennifer, é só fazer várias chamadas à função:
ResponderExcluirdragdrop('id_movedor1','id_movido1');
dragdrop('id_movedor2','id_movido2');
dragdrop('id_movedor3','id_movido3');
sei que ja tem bastante tempo este post, mas eu gostaria muito se saber como poderia limitar até onde a div pode ir na horizontal?
ResponderExcluirOlá Hugo, É no document.onmousemove.
ExcluirVocè verifica o mouse x e o mouse y e vê se estão dentro do seu limite, se não estiver, você não move.
Faz um IF aí.