project/static/js/jquery.resizable.js

   1 (function($){
   2     $.resizable = {
   3         settings: {},
   4         element: {},
   5         drag: function(event) {
   6             $.resizable.element.element.css({
   7                 width: Math.max(event.pageX - $.resizable.element.mouseX + $.resizable.element.width,
   8                     $.resizable.settings.minWidth)
   9             })
  10             $.resizable.element.element.trigger('resizable:resize');
  11             return false;
  12         },
  13         stop: function(event) {
  14             $.resizable.element.element.trigger('resizable:stop');
  15             $(document).unbind('mousemove', $.resizable.drag).unbind('mouseup', $.resizable.stop)
  16                 .children('body').css({cursor: 'auto'})
  17             return false;
  18         }
  19     };
  20
  21     $.fn.resizable = function(handle, options) {
  22         var settings = {
  23             minWidth: 0,
  24             maxWidth: $(window).width()
  25         }
  26
  27         $.extend(settings, options);
  28
  29         var element = $(this);
  30
  31         $(handle, element).mousedown(function(event) {
  32             var position = element.position();
  33             $.resizable.settings = settings;
  34             $.resizable.element = {
  35                 element: element,
  36                 width: parseInt(element.css('width')) || element[0].scrollWidth || 0,
  37                 mouseX: event.pageX,
  38             };
  39             $(document).mousemove($.resizable.drag).mouseup($.resizable.stop)
  40                 .children('body').css({cursor: 'se-resize'});
  41             event.stopImmediatePropagation();
  42         }).bind('dragstart', function(event) { event.preventDefault() });
  43     };
  44 })(jQuery);
  45