Drag2Crop mootools plugin : Drag picture inside a box

UPDATE 09/06/2010 : Start drag at “Top” and “Left” values.

facebook_thumbnail

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

Comments (5)

ThorstenJune 9th, 2010 at 11:20 am

Hello,

well you did a great Job. Thanks for sharing! Can you tell me how the script would look like, if the picture is at for e.g. “top: 30″ and “left: 50″ BEFORE dragging? Normally your scripts starts at “top: 0″ and “left: 0″.

All the best

UpDeLJune 9th, 2010 at 6:08 pm

@Thorsten : Thank you for the idea : Source updated ! You can start now at Top and left values.
Exemple :

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

ThorstenJune 10th, 2010 at 7:45 am

@UpDeL: Thanks, it’s working. But take a look at your Demo (and your source) – I think the order of top and left is wrong. In your example left is set to “-60″, but in reality it’s the top that has “-60″. There must be something wrong :)

ThorstenJune 10th, 2010 at 8:19 am

@UpDeL: A further more improvement to your next version would be the ability to scale the image – something like that: http://dl.dropbox.com/u/2747084/scale.jpg

heel lifts insolesSeptember 27th, 2012 at 6:10 am

I like the valuable info you provide on your articles. I’ll bookmark your blog and test again here regularly. I’m rather sure I will be informed a lot of new stuff right right here!
Good luck for the following!

Leave a comment

Your comment