tadarank afiliados

25 julho, 2008

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>
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

10 comentários:

  1. POw, bacana! Vou testar.

    E 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 :)

    ResponderExcluir
  2. Fã de javascript não podia deixar de comentar ...rs
    Legal 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!

    ResponderExcluir
  3. é muito bom. e se na vez de arrastar o objecto eu preferir copiar esse para outro local, ficando com 2 iguais?

    ResponderExcluir
  4. Parabens pelo seu post.
    Pesquisei na internet inteira sobre drop e todos que tinham, não funcionavam direito em todos navegadores, e o seu, é perfeito...
    Valew

    ResponderExcluir
  5. 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

    ResponderExcluir
  6. Muito bom o post! Agora sem querer abusar, como eu faria com mais de 1 div?

    ResponderExcluir
  7. Jennifer, é só fazer várias chamadas à função:


    dragdrop('id_movedor1','id_movido1');
    dragdrop('id_movedor2','id_movido2');
    dragdrop('id_movedor3','id_movido3');

    ResponderExcluir
  8. 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?

    ResponderExcluir
    Respostas
    1. Olá Hugo, É no document.onmousemove.
      Vocè 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í.

      Excluir

Resultado! Concursos