jquery.pep.js
Version:
Kinetic drag for mobile & desktop
85 lines (80 loc) • 2.13 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jquery.pep custom move demo</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(){
var dragger = $('<div class="dragging"></div>');
var peper = $('.pep').find('.dragger').pep({
place: false,
deferPlacement: true,
velocityMultiplier: 0,
moveTo:function(x, y) {
dragger.css({
left: x,
top: y
});
},
initiate: function(e, pep) {
dragger.css({
top: peper.offset().top,
left: peper.offset().left,
width: peper.width(),
height: peper.height()
}).hide().appendTo(window.document.body).fadeIn(250);
},
stop: function(e, pep) {
peper.fadeOut({
queue: false,
duration: 250,
complete: function() {
peper.stop(1, 1).show();
dragger.fadeOut(150, function(){
dragger.remove();
});
}
}).animate({
top: dragger.offset().top,
left: dragger.offset().left
}, 500);
}
}).end();
});
</script>
<style type="text/css">
.pep{
width: 200px;
height: 200px;
background: blue;
position:absolute;
margin:0;
top:0; left:0;
}
.pep > .dragger {
width:20px; height:20px;
background: red;
position:absolute;
top:0;
right:0;
cursor: move;
}
.dragging {
background:#333;
border-radius:5px;
position:absolute;
}
</style>
</head>
<body>
<div class="pep">
<div class='dragger'>
</div>
</div>
</body>
</html>