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");
