Problema scorrimento DIV

saverio_web · 1 Set 2015

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.

saverio_web · 2 Set 2015

Nessuna soluzione???

littelme · 2 Set 2015

saverio_web ha scritto:
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;

saverio_web · 2 Set 2015

littelme ha scritto:
devi modificare overflow: hidden; con overflow: scroll;

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...

littelme · 2 Set 2015

saverio_web ha scritto:
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 · 3 Set 2015

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>

littelme ha scritto:
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:

saverio_web · 3 Set 2015

Questa è la soluzione con jQuery

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)

Cerca

Cerca

Problema scorrimento DIV

saverio_web

Utente Attivo

saverio_web

Utente Attivo

littelme

Nuovo Utente

saverio_web

Utente Attivo

littelme

Nuovo Utente

saverio_web

Utente Attivo

saverio_web

Utente Attivo

Discussioni simili