Scroll interface with mouse drag

HTML

<div class="scrollable" style="height: 200px; width: 200px;">
  <p>Chocolate cake oat cake marshmallow jelly macaroon marzipan fruitcake lollipop pie. Chocolate bar applicake candy canes cookie muffin toffee sesame snaps sugar plum. Jelly-o liquorice gingerbread powder fruitcake candy tootsie roll croissant. Candy canes bonbon apple pie halvah powder fruitcake. Gummi bears gummies jelly beans gummies. Pastry dragée cake candy canes. Sweet roll chocolate cake croissant carrot cake pastry bonbon.</p>

  <p>Cotton candy caramels tiramisu apple pie oat cake. Cotton candy candy canes sugar plum jelly beans donut pastry macaroon bear claw oat cake. Marzipan oat cake muffin apple pie caramels ice cream wafer candy canes croissant. Donut powder jelly-o danish lemon drops fruitcake. Tootsie roll toffee gummies tootsie roll sugar plum. Croissant chupa chups fruitcake pie lollipop gummi bears toffee. Applicake dragée soufflé chocolate bar apple pie chupa chups jelly beans faworki. Carrot cake halvah donut sweet roll.</p>

  <p>Sweet roll pudding chocolate tootsie roll danish jujubes candy cupcake dragée. Tootsie roll halvah fruitcake croissant cotton candy powder apple pie tart. Brownie bonbon tiramisu toffee chocolate. Sweet marshmallow pie applicake sweet roll cake chocolate bar jelly beans. Liquorice chupa chups jelly beans tootsie roll candy canes pastry halvah. Candy canes danish jelly marzipan. Gingerbread marzipan candy canes donut tiramisu jujubes sweet faworki.</p>
</div>

CSS

.scrollable {
  overflow: auto;
  cursor: move;
}

JavaScript

(function($) {
    $.fn.scrollable = function() {
        var scrolling, strScrollable = '.scrollable';
        if (this.length) {
            this.each(function() {
                var el = $(this),
                    start;

                function move(event) {
                    var x = event.pageX,
                        y = event.pageY;

                    this.scrollLeft += start.x - x;
                    this.scrollTop += start.y - y;
                    start = {
                        x: x,
                        y: y
                    };
                }
                el.bind('mousedown' + strScrollable, function(event) {
                    if (!scrolling) {
                        scrolling = true;
                        start = {
                            x: event.pageX,
                            y: event.pageY
                        };
                        el.bind('mousemove' + strScrollable, move);
                    }
                });
                $(document).bind('mouseup' + strScrollable, function() {
                    if (scrolling) {
                        scrolling = false;
                        el.unbind('mousemove' + strScrollable);
                    }
                });

            });
        }
        return this;
    };
}(jQuery));
jQuery(function($) {
    $('.scrollable').scrollable();
});