drag drop e ingrandimento

**jeffer1** · 18-06-2008, 21:54

ciao
sono nuovo del forum.
Mi dilettavo in un sito è mi sono bloccato su uno script jscript che non riesco a fare.
Qualcuno sa come aiutarmi???
Io vorrei uno script che inserita un immagine in una pagina html mi permetta di effettuare il Drag Drop che non vada oltre i margini un box o una tabella nella quale c'e l'immagine.
Inoltre vorrei inserire due pulsanti (Zoom in e Zoom out)che mi permettano di ingrandire l'immagine o diminuire le dimensioni dell'immagine del 10% rispetto alle dimensioni iniziali.

Non avreste uno script simile da linkarmi gentilmente?

Un grazieeeeeeeeeeeeeee super a chi mi aiuterà.

**Mega69** · 18-06-2008, 22:43

Per il drag&drop ci sono moltissimi script, questo ad esempio http://www.dynamicdrive.com/dynamicindex11/domdrag/
Prova così:

Codice PHP:


window.onload = function() {

  var draggable = document.getElementById("draggable"),

       zoomIn = document.getElementById("zoomIn"),

       zoomOut = document.getElementById("zoomOut");

  Drag.init(draggable);

  zoomIn.onclick = zoomOut.onclick = function() {

    var in = this.id === 'zoomIn' ? -10/100 : 10/100,

         w = parseInt(draggable.style.width.splice(0, -2)),

         h = parseInt(draggable.style.height.splice(0, -2));

    draggable.style.width = ( w + w*in ) + 'px';

    draggable.style.height = ( h + h*in ) + 'px';

  }

}

Gli oggetti dovrebbero avere i seguenti id:
draggable - l'oggetto draggabile
zoomIn - il pulsante per ingrandire
zoomOut - il pulsante per rimpicciolire

l'oggetto draggable inoltre dovrebbe avere le dimensioni definite nell'attributo style:

style="width:200px;height:100px;"

Ah, dimenticavo, non l'ho provato, quindi è possibile che ci siano errori.

**jeffer1** · 23-06-2008, 11:30

infatti non funziona

**Mega69** · 24-06-2008, 00:10

Ci credo, avevo confuso slice con splice ( che è un metodo degli array )
Prova così:

codice:

window.onload = function() {
  var draggable = document.getElementById("draggable"),
       zoomIn = document.getElementById("zoomIn"),
       zoomOut = document.getElementById("zoomOut");
  Drag.init(draggable);
  zoomIn.onclick = zoomOut.onclick = function() {
    var in = this.id === 'zoomIn' ? -10/100 : 10/100,
         w = parseInt(draggable.style.width.slice(0, -2)),
         h = parseInt(draggable.style.height.slice(0, -2));
    draggable.style.width = ( w + w*in ) + 'px';
    draggable.style.height = ( h + h*in ) + 'px';
  }
}

Ricorda che le dimensioni vanno definite direttamente nell'attributo style dell'elemento.
Si potrebbe anche fare in modo di prenderle direttamente dal foglio di stile, ma è un pò più complicato.

**jeffer1** · 24-06-2008, 13:18

questa è la mia pagina html ma non va nonostante la tua correzione

<html>
<head>
</head>
<body>

<p align="center">[img]foto.jpg[/img]</p>
<?
window.onload = function() {
var draggable = document.getElementById("draggable"),
zoomIn = document.getElementById("zoomIn"),
zoomOut = document.getElementById("zoomOut");
Drag.init(draggable);
zoomIn.onclick = zoomOut.onclick = function() {
var in = this.id === 'zoomIn' ? -10/100 : 10/100,
w = parseInt(draggable.style.width.slice(0, -2)),
h = parseInt(draggable.style.height.slice(0, -2));
draggable.style.width = ( w + w*in ) + 'px';
draggable.style.height = ( h + h*in ) + 'px';
}
}
?>

<p align="center">
<input type="button" id="zoomIn" value="Zoom +" onclick="ZoomIn()">
<input type="button" id="zoomOut"value="Zoom -" onclick="ZoomOut()">
</p>
</body>
</html>

**Mega69** · 24-06-2008, 13:37

Ora funziona:

Codice PHP:


<html>

<head>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script>

<script type="text/javascript">

window.onload = function() {

var draggable = document.getElementById("draggable"),

zoomIn = document.getElementById("zoomIn"),

zoomOut = document.getElementById("zoomOut");

Drag.init(draggable);

zoomIn.onclick = zoomOut.onclick = function() {

var zoom = 10/100 * ( this.id === 'zoomIn' ? 1 : -1 ),

w = parseInt(draggable.style.width.slice(0, -2)),

h = parseInt(draggable.style.height.slice(0, -2));

draggable.style.width = ( w + w*zoom ) + 'px';

draggable.style.height = ( h + h*zoom ) + 'px';

}

}

</script>

</head>

<body>



<p align="center">[img]vistasucks.jpg[/img]</p>





<p align="center">

<input type="button" id="zoomIn" value="Zoom +" />

<input type="button" id="zoomOut" value="Zoom -" />

</p>

</body>

</html>

Lo script che ti avevo segnalato andava incluso nella pagina

A ciò si aggiungeva il fatto che avevo usato 'in' come nome dell variabile quando questa è una parola riservata

**jeffer1** · 24-06-2008, 16:19

tutto ok
sei un grande

grazie mille

**jeffer1** · 24-06-2008, 16:36

scusa se aprofitto della tua pazienza ma non è che sapresti come fare ruotare l'immagine tramite un altro bottone dalla pagina html di 5° ad ogni click???

ancora grazie per il tuo aiuto

**Xinod** · 24-06-2008, 16:42

un solo problema per una sola discussione in un unico forum

e vedo che ne hai gia' 2 aperte al proposito...
http://forum.html.it/forum/showthrea...readid=1251246
http://forum.html.it/forum/showthrea...readid=1250900

leggi il regolamento

Discussione: drag drop e ingrandimento

Strumenti discussione

Ricerca discussione

Visualizza

drag drop e ingrandimento

Permessi di invio