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
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
Dominik Skála:
viz http://kod.djpw.cz/tonb
přesouvaný text musí být umístěn v <div id="atom"></div>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: