Skip to content

D
domotikad
Switch branch/tag
Find file
Normal viewHistoryPermalink
drag.html 1.86 KB
Newer Older
nextime's avatar
First github commit
31e7b770
 
nextime committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 
<!DOCTYPE html>
<html>
<head>
    <title>Hammer.js</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>

        h1 {
            margin: 30px;
            text-align: center;
        }

        .drag {
            position: absolute;
            left: 100px;
            top: 100px;
            background: #9fe1e7;
            border-radius: 50px;
            width: 100px;
            height: 100px;
        }

        .drag1 { background: #42d692; }
        .drag2 { background: #4986e7; }
        .drag3 { background: #d06b64; }
        .drag4 { background: #cd74e6; }
        .drag5 { background: #9fe1e7; }

    </style>
</head>

<body>

<h1>Drag the balls!</h1>

<div class="drag drag1"></div>
<div class="drag drag2"></div>
<div class="drag drag3"></div>
<div class="drag drag4"></div>
<div class="drag drag5"></div>


<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/js/modernizr.js"></script>

<script src="../dist/jquery.hammer.js"></script>

<script>

    $(".drag")
            .hammer({ drag_max_touches:0})
            .on("touch drag", function(ev) {
                var touches = ev.gesture.touches;

                ev.gesture.preventDefault();

                for(var t=0,len=touches.length; t<len; t++) {
                    var target = $(touches[t].target);
                    target.css({
                        zIndex: 1337,
                        left: touches[t].pageX-50,
                        top: touches[t].pageY-50
                    });
                }
            });


</script>
<script src="assets/js/ga.js"></script>
</body>
</html>