Problema scorrimento DIV

saverio_web

Utente Attivo
Buonasera ragazzi ho un problema (sciocco) che non riesco proprio a risolvere...
Praticamente ho un DIV con un contenuto che risulta più grosso di esso e vorrei poterlo visualizzare muovendomi dentro di esso tramite il tasto sinistro del mouse, come su Google Maps insomma...come faccio?

Vi posto il codice su cui sto facendo le prove anche se per ora è praticamente solo HTML:
PHP:
<div style="width: 120px; height: 120px; overflow: hidden;"><img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg"></div>
PS: scusate se la discussione può risultare doppia, ma l'ho ri-creata in questa sezione perché mi è stato detto essere più appropriata.
 

littelme

Nuovo Utente
1 Set 2015
13
0
0
Buonasera ragazzi ho un problema (sciocco) che non riesco proprio a risolvere...
Praticamente ho un DIV con un contenuto che risulta più grosso di esso e vorrei poterlo visualizzare muovendomi dentro di esso tramite il tasto sinistro del mouse, come su Google Maps insomma...come faccio?

Vi posto il codice su cui sto facendo le prove anche se per ora è praticamente solo HTML:
PHP:
<div style="width: 120px; height: 120px; overflow: hidden;"><img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg"></div>
PS: scusate se la discussione può risultare doppia, ma l'ho ri-creata in questa sezione perché mi è stato detto essere più appropriata.
devi modificare overflow: hidden; con overflow: scroll; :)
 

littelme

Nuovo Utente
1 Set 2015
13
0
0
Ma non voglio vedere la scrollbar...voglio fare in modo che questa venga sostituita dal pulsante sinistro del mouse, che tenendolo premuto all'interno del div mi permetta di spostarmi dentro di esso, come se fossi in Google Maps...
Ah scusa, avevo capito male! Non saprei come aiutarti perchè non ho mai provato a fare quello che vorresti fare tu. Prova a vedere gli esampi che ci sono qui http://www.html.it/pag/18695/draggable-trascinare-oggetti/ e cerca di riadattarli un attimino :) buon divertimento!
 

saverio_web

Utente Attivo
Risolto :mavieni:
Per chiunque avesse il mio stesso problema:
PHP:
<html>
<head>
    <meta charset="UTF-8">
    <title>Pagina di prova</title>
<style>
body {
    margin: 0px;
}
 
.free {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: crosshair;
}
 
.free:active {
    cursor: move;
}
</style>
 
<script type="text/javascript">
    !function(e,n){"function"==typeof define&&define.amd?define(["exports"],n):n("undefined"!=typeof exports?exports:e.dragscroll={})}(this,function(e){var n=window,o=document,t="mousemove",l="mouseup",i="mousedown",r="EventListener",c="add"+r,f="remove"+r,m=[],s=function(e,r){for(e=0;e<m.length;)r=m[e++],r[f](i,r.md,0),n[f](l,r.mu,0),n[f](t,r.mm,0);for(m=o.getElementsByClassName("dragscroll"),e=0;e<m.length;)!function(e,o,r,f){e[c](i,e.md=function(e){f=1,o=e.clientX,r=e.clientY,e.preventDefault(),e.stopPropagation()},0),n[c](l,e.mu=function(){f=0},0),n[c](t,e.mm=function(n,t){t=e.scroller||e,f&&(t.scrollLeft-=-o+(o=n.clientX),t.scrollTop-=-r+(r=n.clientY))},0)}(m[e++])};"complete"==o.readyState?s():n[c]("load",s,0),e.reset=s});
</script>
</head>
 
<body>
 
<div class="free dragscroll">
    <img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg">
</div>
 
</body>
</html>

Ah scusa, avevo capito male! Non saprei come aiutarti perchè non ho mai provato a fare quello che vorresti fare tu. Prova a vedere gli esampi che ci sono qui http://www.html.it/pag/18695/draggable-trascinare-oggetti/ e cerca di riadattarli un attimino :) buon divertimento!
PS: Grazie littelme, ho smanecchiato un bel po' con i codici che ho trovato in quella pagina ed ho elaborato anche una soluzione con il draggable di jQuery :fonzie:
 
Ultima modifica:

saverio_web

Utente Attivo
Questa è la soluzione con jQuery :p
PHP:
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
    margin: 0px;
}

.div_ {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: crosshair;
}

.div_:active {
    cursor: move;
}

#draggable {
    width: 2560px;
    height: 1600px;
    background: url('http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg');
}

</style>

<script type="text/javascript" src="http://www.html.it/guide/esempi/jqueryui/esempi/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.html.it/guide/esempi/jqueryui/esempi/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#draggable").draggable({ containment: [-1100, 0, 0, -800] });
		$(".ui-draggable").disableSelection();
	});
</script>

</head>

<body>
    <div class="div_" role="main">
        <div id="draggable" class="ui-widget-content ui-draggable" unselectable="on" style="position: relative;"></div>
    </div>
</body>
</html>
PS: nel codice sono riportati dei collegamenti ad il sito di HTML, necessari se si vuole far funzionare lo script (sono file jQuey modificati, con quegli originali a me non funziona)