script.js

// holds the object that is currently being dragged
var currentlyDragging;
// holds the curent mode (0=move, 1=resize, 2=rotate)
var mode = 0;
// stores the old y position of the cursor
var oldY;
var maxZ = 1;

// run when fully loaded
$(window).on('load', function () {
    
    $(document).on('mousedown', 'img', startDragging);
    $(document).on('mousemove', whileDragging);
    $(document).on('mouseup', doneDragging);
    $('#toolchooser').on('change', changeMode);
    
});

function startDragging(e) {
    e.preventDefault();
    currentlyDragging = $(this);
    
    if (!currentlyDragging[0].degree)
        currentlyDragging[0].degree = 0;

    if (mode == 3) {
        currentlyDragging.css("z-index", maxZ);
        maxZ++;
    }
    
    else if (mode == 4) {
        currentlyDragging.remove();
    }

}

function whileDragging(e) {
    if (currentlyDragging == null)
        return false;

    if (mode == 0) {
        var newX = e.pageX - 600;
        var newY = e.pageY - 200;
        currentlyDragging.css({ 'margin-top': newY + 'px', 'margin-left': newX + 'px' });
    } else if (mode == 1) {
        if (e.pageY > oldY) {
            currentlyDragging.css({ height: '-=10px', width: '-=10px' });
        } else if (e.pageY < oldY) {
            currentlyDragging.css({ height: '+=10px', width: '+=10px' });
        }
        oldY = e.pageY;
    } else if (mode == 2) {
        if (e.pageY > oldY) {
            currentlyDragging[0].degree++;
        } else if (e.pageY < oldY) {
            currentlyDragging[0].degree--;
        }
        currentlyDragging.css('transform', 'rotate(' + currentlyDragging[0].degree + 'deg)');
        oldY = e.pageY;
    }
}

function doneDragging(e) {
    currentlyDragging = null;
}

function changeMode() {
    mode = $(this).prop('selectedIndex');
}

$(document).ready(function () {
    // Event Binding
    $('#collage').on('drop', droppedImage);
    $(document).on('dragover', function (e) {
        e.preventDefault();
    });

    // Event Handling Logic
    function droppedImage(e) {
        e.preventDefault();
        var dt = e.originalEvent.dataTransfer;
        var files = dt.files;

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            reader.onload = (function (file) {
                return function (e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.attr('draggable', 'true');
                    img.appendTo('#collage');
                };
            })(file);

            reader.readAsDataURL(file);
        }
    }
});

// Prevents default behavior for drop event
$(document).on('dragover', function (e) {
    e.preventDefault();
});