drag/drag.js

   1 $.drug = null;
   2
   3 $.dragstart = function(e)
   4 {
   5     this.dragElement.deltaX = e.clientX - this.dragElement.offsetLeft;
   6     this.dragElement.deltaY = e.clientY - this.dragElement.offsetTop;
   7
   8     // Save CSS
   9     this.dragElement.oldPos = $.css(this.dragElement, 'position');
  10     this.dragElement.oldCursor = $.css(this.dragElement, 'cursor');
  11     this.dragElement.oldUserSelect = $.css(this.dragElement, 'user-select');
  12
  13     $(this.dragElement).css('position', 'absolute')
  14                        .css('cursor', 'move')
  15                        .css('user-select', 'none');
  16     $.drug = this.dragElement;
  17 };
  18
  19 $.dragstop = function(e)
  20 {
  21     $.drug = null;
  22
  23     // Restore CSS
  24     $(this).css('cursor', this.oldCursor)
  25            .css('user-select', this.oldUserSelect);
  26 }
  27
  28 $.drag = function(e)
  29 {
  30     if ($.drug == null) {
  31         return;
  32     }
  33
  34     // Update position
  35     var nx = (e.clientX - $.drug.deltaX);
  36     var ny = (e.clientY - $.drug.deltaY);
  37
  38     // Bounds check
  39     // Left edge
  40     nx = (nx < 0) ? 0 : nx;
  41     // right edge
  42     nx = (nx + $.drug.offsetWidth) > document.width ? document.width - $.drug.offsetWidth : nx;
  43
  44     // Top
  45     ny = (ny < window.scrollY) ? window.scrollY : ny;
  46
  47     // Bottom
  48     ny = (ny + $.drug.offsetHeight) > window.innerHeight + window.scrollY ? window.innerHeight + window.scrollY - $.drug.offsetHeight: ny;
  49
  50     $($.drug).css('left', nx + 'px')
  51              .css('top', ny + 'px');
  52 };
  53
  54 $.draginit = false;
  55
  56 $.fn.Draggable = function(handle)
  57 {
  58     // Don't add > 1 of these handlers
  59     if (!$.draginit) {
  60         $(document).bind('mousemove', $.drag);
  61     }
  62
  63     return this.each(function()
  64     {
  65         var dhe = handle ? $(this).find(handle) : $(this);
  66         dhe.get(0).dragElement = this;
  67
  68         dhe.bind('mousedown', $.dragstart)
  69            .bind('mouseup', $.dragstop);
  70     });
  71 };