Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: posouvání stránky myší

Aktivity
Avatar
Petr Fiedler
Člen
Avatar
Petr Fiedler:14.12.2018 19:13

Zdravím,
pokouším se vytvořit stránku, která bude hodně široká i dlouhá a bude možné se po ní pohybovat posunem myší. Nevím, ale jak udělat to posouvání myší. Chtěl bych to nějak tak, jako se posouvá mapa např. na google mapách. A také, aby se mi při posouvání neoznačoval text nebo nepřetahovaly obrázky. Děkuji za odpovědi.

Zkusil jsem: Zkoušel jsem hledat na internetu, ale nevěděl jsem, jak to nazvat.

Chci docílit: nastavení stránky tak, aby se dala volně posouvat myší

 
Odpovědět
14.12.2018 19:13
Avatar
Ondřej Pecha:17.12.2018 10:14

Ahoj,
zkoušel jsi celou stránku naprogramovat jako jedno velké SVG?
Pak bys mohl použít sémantický nebo geometrický zoom, případně drag behavior.

Trochu jsem s tím experimentoval zde:
odkaz

Při najetí kurzorem na prázdné místo v síti se celá síť posune nebo při použití kolečka sémanticky zazoomuje.

Třeba ale existuje jiný, úplně jednoduchý způsob jak posouvat celou stránku a ne jen SVG.

Zkus dát do vyhledávače slova zoom, pan, drag

 
Nahoru Odpovědět
17.12.2018 10:14
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.12.2018 11:07

zkus google = js drag drop
(V css se da orezavat pomoci clip.)

<div style="position:relative; background-image:url();" onmousedown="startMove(event)" onmousedown="stopMove(event)"></div>

A stacilo by jen ulozit si pozici mysi z eventu a do nejake promenne provest zmenu pozice obrazku a nastavit podle toho background-position.

 
Nahoru Odpovědět
17.12.2018 11:07
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.12.2018 11:43
<style>
.mapa   {
        position:relative;
        background-image:url(https://www.google.com/logos/doodles/2018/80th-anniversary-of-the-rapid-arrows-6214742761799680-l.png);
        width:200px;
        height:200px;
        background-position:0 0;
        background-repeat:no-repeat;
        border:1px solid #888;
        top:200px;
        left:300px;
        cursor:move;
        }
</style>

<div id="mapa" class="mapa" onmousedown="rrr.startMove(event)" onmousemove="rrr.move(event)" onmouseup="rrr.stopMove(event)" onmouseout="rrr.stopMove(event)"></div>

<script>
var rrr;
rrr = {};
rrr.started = false;
rrr.img = {};
rrr.img.el = document.getElementById('mapa');
rrr.img.pos = {x:0, y:0};
rrr.mouse = {};
rrr.mouse.start = {x:0, y:0};
rrr.mouse.move = {x:0, y:0};
rrr.mouse.end   = {x:0, y:0};
rrr.diffStop = function (index)
        {
        return rrr.mouse.end[index] - rrr.mouse.start[index];
        }
rrr.getMouse = function (event)
        {
        var target, x, y;
        event  = event || window.event; // IE-ism
        target = event.target ? event.target : event.srcElement ? event.srcElement : null;
        x = event.x ? event.x : event.clientX;
        y = event.y ? event.y : event.clientY; //    var cursorX = e.pageX; //    var cursorY = e.pageY;
        return {x: x, y: y};
        }
rrr.startMove = function (event)
        {
        rrr.started = true;
        rrr.mouse.start = rrr.getMouse(event)
        }
rrr.move = function (event)
        {
        var pos, start, move;
        if (rrr.started==false)
                {return;}
        pos   = {};
        pos.x = rrr.img.pos.x;  // kopie pos
        pos.y = rrr.img.pos.y;
        start = rrr.mouse.start;
        move  = rrr.getMouse(event);
        pos.x = pos.x - (move.x - start.x);
        pos.y = pos.y - (move.y - start.y);
        rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
        }
rrr.stopMove = function (event)
        {
        var pos, start, end;
        if (rrr.started==false)
                {return;}
        rrr.started = false;
        pos   = rrr.img.pos;    // pointer na pos
        start = rrr.mouse.start;
        end   = rrr.getMouse(event)
        pos.x = pos.x - (end.x - start.x);
        pos.y = pos.y - (end.y - start.y);
        rrr.img.pos = pos;
        rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
        }
</script>
Editováno 17.12.2018 11:43
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
17.12.2018 11:43
Avatar
Petr Fiedler
Člen
Avatar
Petr Fiedler:17.12.2018 16:35

Díky za nápady! O SVG jsem, přiznám se, nikdy neslyšel. Je to ale víceméně to, co bych potřeboval. Jak moc je složité se naučit udělat něco takového v SVG?
To, co vytvořil Peter Milch, je super. Takhle to potřebuju. Jen tady to funguje na bázi obrázku na pozadí, ale když tam chci obsah (jakožto spoustu obrázků a nějaký text), tak to nepůjde ne? Musel bych mít celou stránku jako jeden velký obrázek, nebo se mýlím?

 
Nahoru Odpovědět
17.12.2018 16:35
Avatar
Odpovídá na Petr Fiedler
Ondřej Pecha:17.12.2018 20:03

Já pro práci s SVG používám knihovnu d3.js
Tady je odkaz na jeden příklad drag včetně zdrojového kódu:
bl.ocks.org
Těžké to není, ale bude tam pár drobných problémů, např. s připojováním divů nebo spanů k SVG - viz diskuze:
ZDE
Celkově bych doporučil tento přístup použít jen v případě, že je stránka generována/řízena nějakými daty.

 
Nahoru Odpovědět
17.12.2018 20:03
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Petr Fiedler
Peter Mlich:18.12.2018 8:02

Pujde, to zvladnes i sam.
Jsou to zaklady css, js. css: position:rela­tive/absolute, top, left.

rrr.img.el.style.left = cislo + 'px' // rrr.img.el.style.right = cislo + 'px'

https://www.jakpsatweb.cz/…icovani.html

To svg je lepsi v tom, ze je to vektorova grafika slozena z objektu. Kdyz potrebujes nejaky objekt 10x, tak si ho snadno naklonujes. (to se da u pixel obrazku taky). Ale, kdyz potrebujes zoom out/in, tak image se ti rozpixeluje, vektorova grafika nee. Tez je to lepsi pro tisk stranky. (to se da u pixel obrazku vyresit 2-3x vetsi velikosti, aby bylo dost pixelu pro tisk, na stranku ho pak zmensujes. Nevyhoda je, ze zabira potom 4x tolik mista, obvykle 2x takova velikost v kb)
Takovy priklad pouziti svg https://mlich.zam.slu.cz/…js-tanks.htm

Editováno 18.12.2018 8:05
 
Nahoru Odpovědět
18.12.2018 8:02
Avatar
Petr Fiedler
Člen
Avatar
Odpovídá na Peter Mlich
Petr Fiedler:18.12.2018 19:34

Díky, mám hotovo!
Teď si říkám, proč jsem došel hned k závěru, že to nejde, když na tom není vůbec nic složitého :D. Kdybych se trochu zamyslel, hned by mě to napadlo. Dodělal jsem to takhle:
v rrr.move a rrr.stopMove jsem místo

rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";

napsal

rrr.img.el.style.left = (-pos.x)+ 'px';
rrr.img.el.style.top = (-pos.y)+ 'px';

A do divu mapa jsem ještě přidal nový div a ten jsem místo mapy definoval jako rrr.img.el a dal jsem mu stejné atributy. Kdybych tohle neudělal, posouvalo by se mi jediné místo, ve kterém se dá posouvat, takže po posunutí by se nedalo posouvat v místě, kde neleží. Takhle mi div mapa zůstává furt na jednom místě a posouvá se jen vnitřní div.
Vše teď funguje jak má.

 
Nahoru Odpovědět
18.12.2018 19:34
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.12.2018 7:36

Ono se da take vyuzit css vlastnosti clip. Nemusi se nic posouvat.

 
Nahoru Odpovědět
19.12.2018 7:36
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.