FGUI Draggable function

The draggable component is defined as:

Components.draggable = function(obj) {
  Components.button(obj);
  obj.getStyle = function() {
    var s = obj.style;
    if (obj.hover) {
      if (mouseDown("left")) s = obj.clickStyle;
      else if (obj.hoverStyle) s = obj.hoverStyle;
    }
    if (activeElement == obj) s = obj.clickStyle;
    return s;
  }
  obj.dragX = true;
  obj.dragY = true;
  obj.minX = -Infinity;
  obj.maxX = Infinity;
  obj.minY = -Infinity;
  obj.maxY = Infinity;
  Object.defineProperty(obj,"valueX",{
    get: function() {
      return (obj.x-obj.minX)/(obj.maxX-obj.minX);
    },
    set: function(e) {
      obj.x = e*(obj.maxX-obj.minX)+obj.minX;
    }
  });
  Object.defineProperty(obj,"valueY",{
    get: function() {
      return (obj.y-obj.minY)/(obj.maxY-obj.minY);
    },
    set: function(e) {
      obj.y = e*(obj.maxY-obj.minY)+obj.minY;
    }
  });
  obj.deltaX = 0;
  obj.deltaY = 0;
  obj.drag = function(b) {
    if (activeElement !== obj) return;
    if (obj.dragX) {
      obj.x = constrain(b.mouseX+obj.deltaX,obj.minX,obj.maxX);
    }
    if (obj.dragY) {
      obj.y = constrain(b.mouseY+obj.deltaY,obj.minY,obj.maxY);
    }
  }
  obj.click = function() {
    obj.deltaX = obj.x-mouseX;
    obj.deltaY = obj.y-mouseY;
    obj.onclick();
    activeElement = obj;
    obj.ongrab();
  };
  obj.ongrab = function() {};
  obj.onrelease = function(){};
};

To add this component to your project, do:

Container.addComponent("draggable");