Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Rolování tažením</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="wrapper"> <table cellpadding=0 cellspacing=0 id="mb"> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> </table> </div> <br> <div class="wrapper"> <table cellpadding=0 cellspacing=0 id="mb2"> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> </table> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.wrapper { overflow: scroll; height: 150px; width:350px; background-color: blue; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } table { border-collapse: collapse; } td { min-width: 100px; height: 100px; box-shadow: 0 0 0 1px rgb(190, 190, 190); padding:0; }
CSS
Autoformát
CSS reset
Až na konci
$(document).ready(function () { var curDown = false, curYPos = 0, curXPos = 0; $('.wrapper').mousedown(function(m){ curYPos = m.pageY + this.scrollTop; curXPos = m.pageX + this.scrollLeft; curDown = this; }); $(window).mouseup(function(){ curDown = false; }).mousemove(function(m){ if(curDown){ curDown.scrollTop = curYPos - m.pageY; curDown.scrollLeft = curXPos - m.pageX; } }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>