Sto cercando un esempio semplice in cui un'immagine dentro ad un div sia draggabile.
Mi spiego: div 300X300 px in cui possa vedere una porzione di un'immagine più grande e che possa spostarla col mouse...
Qualcuno ha qualche idea di dove prendere spunto?
Grazie mille.
Enrico Frison
El signore ghe da e suche a chi che no ga i porsei!
parti da qua
codice:<div style="OVERFLOW: hidden; width:300px; height:300px" id="testing"> [img]../test.gif[/img] </div>Codice PHP:var div=document.getElementById('testing');
div.onmousedown=drags;
div.onmouseup=new Function("dragapproved=false")
var dragapproved=false
var z,x,y
function move(){
if (event.button==1){
if (div.style.pixelLeft>=temp1+event.offsetX-x){
z.style.pixelLeft=temp1+event.offsetX-x
}
if (div.style.pixelTop>= temp2+event.offsetY-y){
z.style.pixelTop=temp2+event.offsetY-y
}
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
Ho provato ma vedo solo l'immagine intera e appena clicco e cerco di draggarla non succede nulla...
Questo il codice:
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> <script language="javascript"> var div=document.getElementById('testing'); div.onmousedown=drags; div.onmouseup=new Function("dragapproved=false") var dragapproved=false var z,x,y function move(){ if (event.button==1){ if (div.style.pixelLeft>=temp1+event.offsetX-x){ z.style.pixelLeft=temp1+event.offsetX-x } if (div.style.pixelTop>= temp2+event.offsetY-y){ z.style.pixelTop=temp2+event.offsetY-y } return false } } function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } </script> </head> <body> <div style="OVERFLOW: hidden; width:300px; height:300px" id="testing"> [img]fff.jpg[/img] </div> </body> </html>
Enrico Frison
El signore ghe da e suche a chi che no ga i porsei!
Ho impostato come position: relative anche il div testing e ora vedo solo una porzione di immagine, ma non si dragga...
Enrico Frison
El signore ghe da e suche a chi che no ga i porsei!
Così funziona, ma scatta tutto e non va su FF :-(codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> </head> <body> <div style="OVERFLOW: hidden; width:500px; height:500px; border: 1px #000000 solid; position:relative;" id="testing"> [img]fff.jpg[/img] </div> <script language="javascript"> var div=document.getElementById('testing'); div.onmousedown=drags; div.onmouseup=new Function("dragapproved=false") var dragapproved=false var z,x,y function move(){ if (event.button==1){ if (div.style.pixelLeft>=temp1+event.offsetX-x){ z.style.pixelLeft=temp1+event.offsetX-x } if (div.style.pixelTop>= temp2+event.offsetY-y){ z.style.pixelTop=temp2+event.offsetY-y } return false } } function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } </script> </body> </html>
Enrico Frison
El signore ghe da e suche a chi che no ga i porsei!
Permessi di invio
Rispondi quotando