[ Index ]
 

Code source de Plume CMS 1.2.2

Accédez au Source d'autres logiciels libres

Classes | Fonctions | Variables | Constantes | Tables

title

Body

[fermer]

/manager/js/ -> drag.js (source)

   1  /* Drag and drop tools by Tim Taylor. Code is under public license.
   2  http://tool-man.org/examples/sorting.html */
   3  
   4  var Coordinates = {
   5      ORIGIN : new Coordinate(0, 0),
   6  
   7      northwestPosition : function(element) {
   8          var x = parseInt(element.style.left);
   9          var y = parseInt(element.style.top);
  10  
  11          return new Coordinate(isNaN(x) ? 0 : x, isNaN(y) ? 0 : y);
  12      },
  13  
  14      southeastPosition : function(element) {
  15          return Coordinates.northwestPosition(element).plus(
  16                  new Coordinate(element.offsetWidth, element.offsetHeight));
  17      },
  18  
  19      northwestOffset : function(element, isRecursive) {
  20          var offset = new Coordinate(element.offsetLeft, element.offsetTop);
  21  
  22          if (!isRecursive) return offset;
  23  
  24          var parent = element.offsetParent;
  25          while (parent) {
  26              offset = offset.plus(
  27                      new Coordinate(parent.offsetLeft, parent.offsetTop));
  28              parent = parent.offsetParent;
  29          }
  30          return offset;
  31      },
  32  
  33      southeastOffset : function(element, isRecursive) {
  34          return Coordinates.northwestOffset(element, isRecursive).plus(
  35                  new Coordinate(element.offsetWidth, element.offsetHeight));
  36      },
  37  
  38      fixEvent : function(event) {
  39          event.windowCoordinate = new Coordinate(event.clientX, event.clientY);
  40      }
  41  };
  42  
  43  function Coordinate(x, y) {
  44      this.x = x;
  45      this.y = y;
  46  }
  47  
  48  Coordinate.prototype.toString = function() {
  49      return "(" + this.x + "," + this.y + ")";
  50  }
  51  
  52  Coordinate.prototype.plus = function(that) {
  53      return new Coordinate(this.x + that.x, this.y + that.y);
  54  }
  55  
  56  Coordinate.prototype.minus = function(that) {
  57      return new Coordinate(this.x - that.x, this.y - that.y);
  58  }
  59  
  60  Coordinate.prototype.distance = function(that) {
  61      var deltaX = this.x - that.x;
  62      var deltaY = this.y - that.y;
  63  
  64      return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  65  }
  66  
  67  Coordinate.prototype.max = function(that) {
  68      var x = Math.max(this.x, that.x);
  69      var y = Math.max(this.y, that.y);
  70      return new Coordinate(x, y);
  71  }
  72  
  73  Coordinate.prototype.constrain = function(min, max) {
  74      if (min.x > max.x || min.y > max.y) return this;
  75  
  76      var x = this.x;
  77      var y = this.y;
  78  
  79      if (min.x != null) x = Math.max(x, min.x);
  80      if (max.x != null) x = Math.min(x, max.x);
  81      if (min.y != null) y = Math.max(y, min.y);
  82      if (max.y != null) y = Math.min(y, max.y);
  83  
  84      return new Coordinate(x, y);
  85  }
  86  
  87  Coordinate.prototype.reposition = function(element) {
  88      element.style["top"] = this.y + "px";
  89      element.style["left"] = this.x + "px";
  90  }
  91  
  92  Coordinate.prototype.equals = function(that) {
  93      if (this == that) return true;
  94      if (!that || that == null) return false;
  95  
  96      return this.x == that.x && this.y == that.y;
  97  }
  98  
  99  
 100  /*
 101   * drag.js - click & drag DOM elements
 102   *
 103   * originally based on Youngpup's dom-drag.js, www.youngpup.net
 104   */
 105  
 106  var Drag = {
 107      BIG_Z_INDEX : 10000,
 108      group : null,
 109      isDragging : false,
 110  
 111      makeDraggable : function(group) {
 112          group.handle = group;
 113          group.handle.group = group;
 114  
 115          group.minX = null;
 116          group.minY = null;
 117          group.maxX = null;
 118          group.maxY = null;
 119          group.threshold = 0;
 120          group.thresholdY = 0;
 121          group.thresholdX = 0;
 122  
 123          group.onDragStart = new Function();
 124          group.onDragEnd = new Function();
 125          group.onDrag = new Function();
 126          
 127          // TODO: use element.prototype.myFunc
 128          group.setDragHandle = Drag.setDragHandle;
 129          group.setDragThreshold = Drag.setDragThreshold;
 130          group.setDragThresholdX = Drag.setDragThresholdX;
 131          group.setDragThresholdY = Drag.setDragThresholdY;
 132          group.constrain = Drag.constrain;
 133          group.constrainVertical = Drag.constrainVertical;
 134          group.constrainHorizontal = Drag.constrainHorizontal;
 135  
 136          group.onmousedown = Drag.onMouseDown;
 137      },
 138  
 139      constrainVertical : function() {
 140          var nwOffset = Coordinates.northwestOffset(this, true);
 141          this.minX = nwOffset.x;
 142          this.maxX = nwOffset.x;
 143      },
 144  
 145      constrainHorizontal : function() {
 146          var nwOffset = Coordinates.northwestOffset(this, true);
 147          this.minY = nwOffset.y;
 148          this.maxY = nwOffset.y;
 149      },
 150  
 151      constrain : function(nwPosition, sePosition) {
 152          this.minX = nwPosition.x;
 153          this.minY = nwPosition.y;
 154          this.maxX = sePosition.x;
 155          this.maxY = sePosition.y;
 156      },
 157  
 158      setDragHandle : function(handle) {
 159          if (handle && handle != null) 
 160              this.handle = handle;
 161          else
 162              this.handle = this;
 163  
 164          this.handle.group = this;
 165          this.onmousedown = null;
 166          this.handle.onmousedown = Drag.onMouseDown;
 167      },
 168  
 169      setDragThreshold : function(threshold) {
 170          if (isNaN(parseInt(threshold))) return;
 171  
 172          this.threshold = threshold;
 173      },
 174  
 175      setDragThresholdX : function(threshold) {
 176          if (isNaN(parseInt(threshold))) return;
 177  
 178          this.thresholdX = threshold;
 179      },
 180  
 181      setDragThresholdY : function(threshold) {
 182          if (isNaN(parseInt(threshold))) return;
 183  
 184          this.thresholdY = threshold;
 185      },
 186  
 187      onMouseDown : function(event) {
 188          event = Drag.fixEvent(event);
 189          Drag.group = this.group;
 190  
 191          var group = this.group;
 192          var mouse = event.windowCoordinate;
 193          var nwOffset = Coordinates.northwestOffset(group, true);
 194          var nwPosition = Coordinates.northwestPosition(group);
 195          var sePosition = Coordinates.southeastPosition(group);
 196          var seOffset = Coordinates.southeastOffset(group, true);
 197  
 198          group.originalOpacity = group.style.opacity;
 199          group.originalZIndex = group.style.zIndex;
 200          group.initialWindowCoordinate = mouse;
 201          // TODO: need a better name, but don't yet understand how it
 202          // participates in the magic while dragging 
 203          group.dragCoordinate = mouse;
 204  
 205          Drag.showStatus(mouse, nwPosition, sePosition, nwOffset, seOffset);
 206  
 207          group.onDragStart(nwPosition, sePosition, nwOffset, seOffset);
 208  
 209          // TODO: need better constraint API
 210          if (group.minX != null)
 211              group.minMouseX = mouse.x - nwPosition.x + 
 212                      group.minX - nwOffset.x;
 213          if (group.maxX != null) 
 214              group.maxMouseX = group.minMouseX + group.maxX - group.minX;
 215  
 216          if (group.minY != null)
 217              group.minMouseY = mouse.y - nwPosition.y + 
 218                      group.minY - nwOffset.y;
 219          if (group.maxY != null) 
 220              group.maxMouseY = group.minMouseY + group.maxY - group.minY;
 221  
 222          group.mouseMin = new Coordinate(group.minMouseX, group.minMouseY);
 223          group.mouseMax = new Coordinate(group.maxMouseX, group.maxMouseY);
 224  
 225          document.onmousemove = Drag.onMouseMove;
 226          document.onmouseup = Drag.onMouseUp;
 227  
 228          return false;
 229      },
 230  
 231      showStatus : function(mouse, nwPosition, sePosition, nwOffset, seOffset) {
 232          window.status = 
 233                  "mouse: " + mouse.toString() + "    " + 
 234                  "NW pos: " + nwPosition.toString() + "    " + 
 235                  "SE pos: " + sePosition.toString() + "    " + 
 236                  "NW offset: " + nwOffset.toString() + "    " +
 237                  "SE offset: " + seOffset.toString();
 238      },
 239  
 240      onMouseMove : function(event) {
 241          event = Drag.fixEvent(event);
 242          var group = Drag.group;
 243          var mouse = event.windowCoordinate;
 244          var nwOffset = Coordinates.northwestOffset(group, true);
 245          var nwPosition = Coordinates.northwestPosition(group);
 246          var sePosition = Coordinates.southeastPosition(group);
 247          var seOffset = Coordinates.southeastOffset(group, true);
 248  
 249          Drag.showStatus(mouse, nwPosition, sePosition, nwOffset, seOffset);
 250  
 251          if (!Drag.isDragging) {
 252              if (group.threshold > 0) {
 253                  var distance = group.initialWindowCoordinate.distance(
 254                          mouse);
 255                  if (distance < group.threshold) return true;
 256              } else if (group.thresholdY > 0) {
 257                  var deltaY = Math.abs(group.initialWindowCoordinate.y - mouse.y);
 258                  if (deltaY < group.thresholdY) return true;
 259              } else if (group.thresholdX > 0) {
 260                  var deltaX = Math.abs(group.initialWindowCoordinate.x - mouse.x);
 261                  if (deltaX < group.thresholdX) return true;
 262              }
 263  
 264              Drag.isDragging = true;
 265              group.style["zIndex"] = Drag.BIG_Z_INDEX;
 266              group.style["opacity"] = 0.75;
 267          }
 268  
 269          // TODO: need better constraint API
 270          var adjusted = mouse.constrain(group.mouseMin, group.mouseMax);
 271          nwPosition = nwPosition.plus(adjusted.minus(group.dragCoordinate));
 272          nwPosition.reposition(group);
 273          group.dragCoordinate = adjusted;
 274  
 275          // once dragging has started, the position of the group
 276          // relative to the mouse should stay fixed.  They can get out
 277          // of sync if the DOM is manipulated while dragging, so we
 278          // correct the error here
 279          //
 280          // TODO: what we really want to do is find the offset from
 281          // our corner to the mouse coordinate and adjust to keep it
 282          // the same
 283          var offsetBefore = Coordinates.northwestOffset(group);
 284          group.onDrag(nwPosition, sePosition, nwOffset, seOffset);
 285          var offsetAfter = Coordinates.northwestOffset(group);
 286  
 287          if (!offsetBefore.equals(offsetAfter)) {
 288              var errorDelta = offsetBefore.minus(offsetAfter);
 289              nwPosition = Coordinates.northwestPosition(group).plus(errorDelta);
 290              nwPosition.reposition(group);
 291          }
 292  
 293          return false;
 294      },
 295  
 296      onMouseUp : function(event) {
 297          event = Drag.fixEvent(event);
 298          var group = Drag.group;
 299  
 300          var mouse = event.windowCoordinate;
 301          var nwOffset = Coordinates.northwestOffset(group, true);
 302          var nwPosition = Coordinates.northwestPosition(group);
 303          var sePosition = Coordinates.southeastPosition(group);
 304          var seOffset = Coordinates.southeastOffset(group, true);
 305  
 306          document.onmousemove = null;
 307          document.onmouseup   = null;
 308          group.onDragEnd(nwPosition, sePosition, nwOffset, seOffset);
 309  
 310          if (Drag.isDragging) {
 311              // restoring zIndex before opacity avoids visual flicker in Firefox
 312              group.style["zIndex"] = group.originalZIndex;
 313              group.style["opacity"] = group.originalOpacity;
 314          }
 315  
 316          Drag.group = null;
 317          Drag.isDragging = false;
 318  
 319          return false;
 320      },
 321  
 322      fixEvent : function(event) {
 323          if (typeof event == 'undefined') event = window.event;
 324          Coordinates.fixEvent(event);
 325  
 326          return event;
 327      }
 328  };


Généré le : Mon Nov 26 11:57:01 2007 par Balluche grâce à PHPXref 0.7
  Clicky Web Analytics