Arrastar uma Imagem na página com jQuery

Curso de JavaScript e jQuery

Veja como arrastar uma imagem contida em uma página do site para outros lugares da página. Pode parecer uma função sem serventia, mas os foruns de desenvolvedores estão cheios de gente pedindo ajuda de como fazer isso.
Então analise o código abaixo e, para usá-lo, basta copiar as funções (function) de JavaScript (jQuery) e colar entre as tags <head> e </head>, criar a <div> com identificação e alterar o nome da <div> nas funções ou nomear a sua ,div> tal as funções a chama.




Para Ver funcionando, Clique Aqui…

Vamos ao Código:
<html>
<head>
<style type=”text/css”>
<!–
.dragme{position:relative;}
–>
</style>

<script type=”text/javascript”>
<!– This script and many more are available free online at –>
<!– Created by: elouai.com –>
<!– Início
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX – x : tx + event.clientX – x;
    dobj.style.top  = nn6 ? ty + e.clientY – y : ty + event.clientY – y;
    return false;
  }
}
function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? “HTML” : “BODY”;
  while (fobj.tagName != topelement && fobj.className != “dragme”)
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className==”dragme”)
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }

}

document.onmousedown=selectmouse;
document.onmouseup=new Function(“isdrag=false”);
//  Fim –>
</script>
</head>
<body>
<div align=”center”>
<img class=”dragme” height=”212″ src=”cubo.png” width=”202″ />
</div>
<div class=”dragme”>
<b>mova-me!!! please!!!</b><br />repare que eu estou por cima!!!!</div>
</body>
</html>

 

Compartilhe com os amigosShare on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest

Uma resposta para “Arrastar uma Imagem na página com jQuery”

  1. Agradeço imensamente a todos que deixam comentários e elogios no blog. Peço porém a quem deseja alguma resposta mais rápida entrar em contato por e-mail usando a aba Contato, pois devido a quantidade de comentários nos diversos artigos do blog, muitas vezes pode demorar até que eu chegue ao seu comentário.
    Muito obrigado.

    Thank you so much to all who leave comments and compliments on the blog. But I would ask anyone who wants a quicker response to contact us by email using the Contact tab, because due to the amount of comments in the various articles in the blog, it can often take until I get to your comment.
    Thank you very much.

Deixe um comentário