jquery.pep.js
Version:
Kinetic drag for mobile & desktop
60 lines (49 loc) • 1.21 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jquery.pep - easing</title>
<!-- Load local jQuery. -->
<script src="../libs/jquery/jquery.js"></script>
<script src="../libs/modernizr.min.js"></script>
<!-- Load local lib and tests. -->
<script src="../src/jquery.pep.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.pep').pep({
axis: 'x',
initiate: pdrag,
start: pdrag,
drag: pdrag,
stop: pdrag,
easing: pdrag,
rest: pdrag,
});
function pdrag(e, obj){
var drag = $(obj.el);
var left = String( drag.position().left)+"px";
$(".status").text(left);
$('.other').width(left);
}
});
</script>
<style type="text/css">
.pep{
background: blue;
height: 100px;
width: 100px;
cursor: move;
}
.other{
width:0%;
height: 40px;
background-color:green;
}
</style>
</head>
<body>
<div class="pep"></div>
<div class="other"></div>
<div class="status">status</div>
</body>
</html>