Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div ou imagem móvel / arrastável JavaScript

25-01-2008 17:40

Esse script permite você mover ou arrastar uma div ou uma figura facilmente.

CSS
<style type="text/css"> .arrastavel{ position:relative; } </style>

JAVASCRIPT
<script type="text/javascript"> 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 != "arrastavel") { fobj = nn6 ? fobj.parentNode : fobj.parentElement; } if (fobj.className=="arrastavel") { 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"); </script>

EXEMPLOS DE USO

<img src="casa.jpg" class="arrastavel">

<div class="arrastavel" style="width:100px; height:100px;">conteúdo móvel</div>
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 1

Div ou imagem móvel / arrastável

12-09-2009 01:38

Valew mesmo quebrou maior galho!
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div ou imagem móvel / arrastável

12-09-2009 09:04

:)
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 1

Div ou imagem móvel / arrastável

08-02-2010 16:33

só funciona no internet explorer...alguem me dizer por q?....estou precisando de um q funcione em todos navegadores...obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div ou imagem móvel / arrastável

08-02-2010 17:08

Ele funciona no IE e FF
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 1

Div ou imagem móvel / arrastável

07-04-2011 09:42

Pessoal, quando eu acrescento no início do domcumento a !DOCTYPE para validação de documento XHTML, esta Div móvel deixar de funcionar em outros navegadores e funciona apenas no IE. Alguém sabe como corrigir isto considerando a !DOCTYPE para XHTML??
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div ou imagem móvel / arrastável

07-04-2011 11:48

Não sabia dessa incompatibilidade. Acho que a solução seria usar o mesmo script com jQuery. Achei um script que permite arrastar a div no link abaixo.

Inclusive a página de exemplo possui o DOCTYPE

http://batiste.dosimple.ch/blog/posts/2 ... ation.html

Tem também esse exemplo com jQueryUI

http://jqueryui.com/demos/draggable/
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot], Google [Bot]