moveTo: function(x,y) {
x = this.ele.restrictX ? 0 : x;
y = this.ele.restrictY ? 0 : y;
if (x < this.ele.limitsX[0] || x > this.ele.limitsX[1]) { return; }
if (y < this.ele.limitsY[0] || y > this.ele.limitsY[1]) { return; }
stylar(this.ele).set('transform', 'translate(' + x + 'px,' + y + 'px)');
this.ele.position = this.position = [x,y];
},
setTo: function(x,y) {
x = this.ele.restrictX ? 0 : x;
y = this.ele.restrictY ? 0 : y;
if (x < this.ele.limitsX[0] || x > this.ele.limitsX[1]) { return; }
if (y < this.ele.limitsY[0] || y > this.ele.limitsY[1]) { return; }
stylar(this.ele).set('transform', 'translate(' + x + 'px,' + y + 'px)');
this.ele.onChange(x, y);
this.ele.position = this.position = [x,y];
this.ele.dispatchEvent(onDrop);
},
// Move draggy object using CSS3 translate3d
function dragMove (e) {
e.preventDefault();
var movedX, movedY, relX, relY,
clientX = isTouch ? e.touches[0].pageX : e.clientX,
clientY = isTouch ? e.touches[0].pageY : e.clientY;
if (!restrictX) {
// Mouse movement (x axis) in px
movedX = clientX - posX;
// New pixel value (x axis) of element
newX = relativeX + movedX;
if (newX >= limitsX[0] && newX <= limitsX[1]) {
posX = clientX;
relativeX = newX;
}
else if (newX < limitsX[0]) {
relativeX = limitsX[0];
}
else if (newX > limitsX[1]) {
relativeX = limitsX[1];
}
}
if (!restrictY) {
movedY = clientY - posY;
newY = relativeY + movedY;
if (newY >= limitsY[0] && newY <= limitsY[1]) {
posY = clientY;
relativeY = newY;
}
else if (newY < limitsY[0]) {
relativeY = limitsY[0];
}
else if (newY > limitsY[1]) {
relativeY = limitsY[1];
}
}
self.draggy.position = self.position = [relativeX, relativeY];
stylar(self).set('transform', 'translate(' + relativeX + 'px,' + relativeY + 'px)');
self.onChange(relativeX, relativeY);
self.dispatchEvent(onDrag);
}
function nextColor(elements) {
stylar(elements[0]).set('background', 'blue');
}
reset: function() {
stylar(this.ele).set('transform', 'translate(' + 0 + 'px,' + 0 + 'px)');
this.ele.position = [0,0];
},