41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="soccer.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h2>Place superheroes around the soccer field.</h2>
|
|
|
|
<p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
|
|
|
|
<p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
|
|
|
|
<p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
|
|
|
|
<p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
|
|
|
|
<p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
|
|
|
|
<div id="field">
|
|
|
|
</div>
|
|
|
|
<div class="hero draggable" id="hero1"></div>
|
|
<div class="hero draggable" id="hero2"></div>
|
|
<div class="hero draggable" id="hero3"></div>
|
|
<div class="hero draggable" id="hero4"></div>
|
|
<div class="hero draggable" id="hero5"></div>
|
|
<div class="hero draggable" id="hero6"></div>
|
|
|
|
<img src="https://en.js.cx/clipart/ball.svg" class="draggable">
|
|
|
|
<div style="clear:both"></div>
|
|
|
|
<script src="soccer.js"></script>
|
|
</body>
|
|
|
|
</html>
|