Source: suxess/mockup-editor/canvas.js

'use strict';

/**
 *
 * @constructor
 */
SUXESS.Canvas = function() {
    SUXESS.Renderable.call(this, {
        class: ['canvas']
    });
};

SUXESS.Canvas.prototype = Object.create( SUXESS.Renderable.prototype );
SUXESS.Canvas.constructor = SUXESS.Canvas;

/**
 *
 * @returns {DOM}
 */
SUXESS.Canvas.prototype.render = function() {
    var elm = SUXESS.Renderable.prototype.render.call(this);

    $(elm).droppable({
        accept: '.tool',
        drop: function(e, ui) {

            console.log(ui);
            var canvas = $(elm);
            var canvasOffset = canvas.offset();

            var offset = {};
            for (var axis in ui.offset) {
              offset[axis] = ui.offset[axis] - canvasOffset[axis];
            }

            var position = { x: offset.left, y: offset.top };
            ui.draggable.data('renderable').triggerAction(canvas, position);

        },
    });

    return elm;
};