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

See Demo

GitHub Repository

Projet @ Mootools Forge

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