This script goes into head section
<!-- Include jQuery Library -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"> </script>
<!-- Include dragable Library -->
<script src="dragable.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#drag").dragable({
Axis: 'both',
OnStart: null,
OnDrag: null,
OnEnd: null
});
$("#dragx").dragable({
Axis: 'x',
OnStart: null,
OnDrag: null,
OnEnd: null
});
$("#dragy").dragable({
Axis: 'y',
OnStart: null,
OnDrag: null,
OnEnd: null
});
});
</script>
HTML Example
<div class="contain" style="height: 400px; -moz-box-shadow: inset 0 0 20px #D4D4D4;
-webkit-box-shadow: inset 0 0 20px #D4D4D4; box-shadow: inset 0 0 20px #D4D4D4;
border: 1px solid #D4D4D4; padding: 5px; text-align: center; position:relative; padding: 10px; font-size: 40px;
color: #D4D4D4;">
<div id="dragx" style="width: 100px; height: 100px; background-color: Green; border-radius: 10px;">
</div>
<div id="dragy" style="width: 100px; height: 100px; background-color: Purple; border-radius: 10px;">
</div>
<div id="drag" style="width: 100px; height: 100px; background-color: Fuchsia; border-radius: 10px;">
</div>
</div>
