| Autor | Zpráva | ||
|---|---|---|---|
| Dominik Skála Profil |
Potřeboval bych zjistit jak se dá vytvořit například 6 různých buněk, se kterými se dá pohybovat jak uživatel požaduje v nějakém určitém prostředí. Něco na smysl http://seznam.cz, kde si může uživatel nastavovat zprávy úplně dolů a něco místo toho apod. Jak se to dělá?
Pak by mě ještě zajímalo jestli se dá nějak nastavit, že v případě že uživatel najede kurzorem na danou buňku (kartu), tak ta vyjede o 20% směrem k uživateli. Dá se toto nějak udělat? Díky moc. |
||
| Taps Profil |
#2 · Zasláno: 5. 6. 2015, 08:43:48
Dominik Skála:
pro inspiraci http://jecas.cz/drag-drop |
||
| Dominik Skála Profil |
Nevíte proč mi nejde s tím pohybovat?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/move.js"></script> <link rel="stylesheet" href="css/default.css" /> <title>Mladá Fronta a.s.</title> </head> <body> <div id="header"> <br><p><br>MLADÁ FRONTA a.s.</p> </div> <div id="content"> <div id="atom"></div> </div> </body> </html> var presouvany = document.querySelector("#atom");
var souradnice = {x: 0, y: 0}; // výchozí umístění „left: 0; top: 0“
var posunSouradnice; // pro zjišťování posunu
var puvodniSouradnice; // souradnice prvku před posunem
presouvany.onmousedown = function(e) {
var event = window.event || e;
presouvany.setAttribute("data-move", "");
puvodniSouradnice = {x : souradnice.x, y: souradnice.y};
posunSouradnice = {
x: event.clientX,
y: event.clientY
};
};
document.onmousemove = function(e) {
if (!presouvany.hasAttribute("data-move")) return;
var event = window.event || e;
var x = puvodniSouradnice.x + event.clientX - posunSouradnice.x;
var y = puvodniSouradnice.y + event.clientY - posunSouradnice.y;
souradnice.x = x;
souradnice.y = y;
presouvany.style.transform = "translate(" + x + "px, " + y + "px)";
};
document.onmouseup = presouvany.onmouseup = function() {
presouvany.removeAttribute("data-move");
}; |
||
| Taps Profil |
#4 · Zasláno: 5. 6. 2015, 23:08:44
|
||
|
Časová prodleva: 9 let
|
|||
0