Drag2Crop mootools plugin : Drag picture inside a box
UPDATE 09/06/2010 : Start drag at “Top” and “Left” values.
Drag2Crop : This small mootools plugin extends “Drag plgin” allow to drag picture inside a small box to get a thumbnail showing the good part of the picture, and after Drag complete return values [Top, Left, Width, Height] of picture relative to the box (Like facebook).
The MooTools 1.2 JavaScript
var Drag2Crop = new Class({
Extends: Drag,
Implements:[Options,Events],
initialize: function(picture, options) {
this.setOptions({
relative : 'relative',
modifiers : { x: 'scrollLeft', y: 'scrollTop' },
style : false,
invert : true,
top : 0,
left : 0,
onComplete : this.complete.bind(this),
debug : false
}, options);
this.top = this.options.top.toInt();
this.left = this.options.left.toInt();
this.picture = $(picture);
this.relative = $(this.options.relative).setStyles({cursor:'move'}).scrollTo(-this.left, -this.top);
this.parent(this.relative);
this.__construct();
},
__construct : function(){
if(Browser.Engine.trident) document.ondragstart = function (){return false;}; // IE fix
},
coordinates : function(){
this.getCoordinates = this.relative.getScroll();
this.getSize = this.relative.getSize();
this.width = this.relative.getSize().x.toInt();
this.height = this.relative.getSize().y.toInt();
this.left = -this.getCoordinates.x.toInt();
this.top = -this.getCoordinates.y.toInt();
},
complete : function(){
this.coordinates();
this.fireEvent("done",[this.top,this.left,this.width,this.height]);
}
});
The Usage
window.addEvent('load', function(){
new Drag2Crop('pictureId', {
relative : 'relative',
top : -30, // Start at top : -30
left : -60, // Start at left : -60
onStart : function(){
this.picture.setStyles({opacity:0.5});
},
onDone : function(top,left){
this.picture.setStyles({opacity:1});
$('test').set('text', 'Top : ' + top + ' | Left : ' + left);
}
});
});
Events :
beforeStart : Executed before the Drag instance attaches the events. Receives the dragged element as an argument.
start : Executed when the user starts to drag (on mousedown). Receives the dragged element as an argument.
snap : Executed when the user has dragged past the snap option. Receives the dragged element as an argument.
drag : Executed on every step of the drag. Receives the dragged element and the event as arguments.
complete : Executed when the user completes the drag. Receives the dragged element and the event as arguments.
cancel : Executed when the user has cancelled the drag. Receives the dragged element as an argument.
top: (number) start drag at top value.
left: (number) start drag at left value.
done : Executed when the user completes the drag.Receives the values [Top, Left, Width, Height] of picture relative to the box
