Dragable

Responsive jQuery Plugin

A jQuery plugin to allow dragging of element.

Examples

Try to drag each box.

Horizontal
Vertical
Free

Features

  1. Catch mouse click & drag, mouse swipe
  2. Handle touch, move and swipe events
  3. Works on iphone, ipad, android

How To Use

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>

Usage Options

Option Default Description
Axis 'both' 'both' | 'x' | 'y'

Restricts movement of dragable element.

OnStart null function() { }

Fires once when touchdown or mousedown

OnDrag null function(xdiff, ydiff, x, y) { }

Fires when dragable element moved. xdiff and ydiff is the displacement since last move. x and y represent current clientX and clientY
OnEnd null function() { }

Fires when mouseup or touchreleased.