jquery.pep.js
Version:
Kinetic drag for mobile & desktop
90 lines (73 loc) • 2.63 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jquery.pep custom constraint demo</title>
<!-- Load local jQuery. -->
<script src="../libs/jquery/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!-- Load local lib and tests. -->
<script src="../src/jquery.pep.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.pep-horizontal').pep({
axis: 'x',
constrainTo: [0, 0, 0, ($('.pep-horizontal').width() - $('.pep-container-horizontal').width()) * -1]
});
$('.pep-vertical').pep({
axis: 'y',
constrainTo: [($('.pep-vertical').height() - $('.pep-container-vertical').height()) * -1, 0, 0, 0]
});
$('.pep').pep({
constrainTo: [300, 600, 600, 300]
})
});
</script>
<style type="text/css">
.pep-container-horizontal { width: 600px; height: 200px; border: 1px solid blue; overflow: hidden; position: relative; margin-bottom: 20px }
.pep-horizontal { list-style: none; margin: 0; width: 2510px; padding: 0 }
.pep-horizontal li { float: left; margin-right: 10px; background: blue; text-align: center; width: 200px; height: 200px; color: #fff }
.pep-horizontal li:last-child { margin-right: 0; }
.pep-container-vertical { width: 200px; height: 600px; border: 1px solid red; overflow: hidden; position: relative }
.pep-vertical { list-style: none; margin: 0; width: 2510px; padding: 0 }
.pep-vertical li { margin-bottom: 10px; background: red; text-align: center; width: 200px; height: 200px; color: #fff }
.pep-vertical li:last-child { margin-bottom: 0; }
.pep{ height: 100px; width: 100px; position: absolute; top: 300px; left: 300px; background: blue }
</style>
</head>
<body>
<div class="pep-container-horizontal">
<ul class="pep-horizontal">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div class="pep-container-vertical">
<ul class="pep-vertical">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div class='pep'></div>
</body>
</html>