JQueryUI passing data from droppable to draggable

Question

I'm working on a JQuerUI based drag and drop control system. The idea is to have "controls" (which are draggables) that get added to a "form" (a droppable) from a toolbox menu (these are also draggable). I managed to get the code working so that I could drop the "control" onto the "form". The problem I have now is that in the drop function of the "form" I need to pass information from the "form" to the "control". My issue is that in the drop function when I reference the this variable it's not the "form" object, it's a DOM object (I think, not really clear on this). Here is the code I have thus far:

The Form Object

$.widget("wdss.form",
{
    gridSize: 10,
    _create: function()
    {
        this.element.droppable({
            accept: ".toolbox-item",
            hoverClass: "ui-state-highlight",
            drop: this.handleDrop
        });
    },
    handleDrop: function( event, ui ) 
    {
        var elemType = $(ui.draggable).data("wdss.type");
            //the this variable here is the wrong one
        var container = $(ui.draggable)[elemType]("GetControl", this); 

        //this.gridSize is undefined here
        var fixedTop = ui.position.top - (ui.position.top % this.gridSize); 
        var fixedLeft = ui.position.left - (ui.position.left % this.gridSize);

        //Set the control's positon and add it to this
        container.css({top: fixedTop, left: fixedLeft});
        container.appendTo(this);
    }
});

The Control Object

$.widget("wdss.gauge", $.wdss.control,
{
    form: null,
    canvas: null,
    gauge: null,
    _create: function(form)
    {
        this._super( "_create" );
        this.form = form;
        this.element.on("resizestart", $.proxy(this._ResizeStart, this));
        this.element.on("resizestop", $.proxy(this._ResizeEnd, this));
        this.canvas = $('<canvas></canvas>').appendTo(this.content);
        this.canvas.attr("height", this.content.height());
        this.canvas.attr("width", this.content.width());
        this.gauge = new AquaGauge($(this.canvas), {});
        $('<button style="position: absolute; top: 0; left: 0; width: 20px; height: 20px;">Test</button>').appendTo(this.content
        ).click($.proxy(function() {this.gauge.refresh((Math.random()) - 0.5);}, this));

        //Give us a way to generically call functions. In this case used 
        $(this.element).data("wdss.type", this.widgetName);
    },

    _ResizeStart: function(event, ui)
    {
        this.canvas.hide();
    },

    _ResizeEnd: function(event, ui)
    {
        var maxSize = Math.min(this.content.height(), this.content.width());
        var newHeight = this.content.height() / (this.content.height()/maxSize );
        var newWidth = this.content.width() / (this.content.width()/maxSize );
        var newTop = (this.content.height() - newHeight)/2;
        var newLeft = (this.content.width() - newWidth)/2;

        this.canvas.attr("height", newHeight);
        this.canvas.attr("width", newWidth);
        this.canvas.css({top: newTop, left: newLeft});
        this.canvas.show();
        this.gauge.redraw();
    }
});

The Toolbox Item

$.widget("wdss.toolboxGauge", $.wdss.toolboxItem,
{
    _create: function()
    {
        this._super( "_create" );
        //Needed to get the control type
        $(this.element).data("wdss.type", this.widgetName);
    },

    GetControl: function(form)
    {
        return $('<div></div>').gauge(form);
    }
});

Any help on this would be greatly appreciated! Sorry for the lack of comments, this is just an experimental version to see if what I want can be done

Edit 1

After a comment by ryuutatsuo I tried a few things and got it to work but I'm not confident it was the right way to achieve what I wanted. Here's the new code:

$.widget("wdss.form",
{
    gridSize: 10,
    _create: function()
    {
        $(this.element).data("wdss.form", this); //Added this
        this.element.droppable({
            accept: ".toolbox-item",
            hoverClass: "ui-state-highlight",
            drop: this.handleDrop
        });
    },

    handleDrop: function( event, ui ) 
    {
        var form = $(this).data("wdss.form"); //Added this
        var elemType = $(ui.draggable).data("wdss.type");
        var container = $(ui.draggable)[elemType]("GetControl", form);

        //Fix the coords so they are on the grid
        var fixedTop = ui.position.top - (ui.position.top % form.gridSize);
        var fixedLeft = ui.position.left - (ui.position.left % form.gridSize);

        //Set the control's positon and add it to this
        container.css({top: fixedTop, left: fixedLeft});
        container.appendTo(this);
    }
});

Answer 1

I changed how the drop was handled so that it was an anonymous function and this solved the problem. I believe my mistake was the scope the this variable. Below is the code:

 drop: function (event, ui)
         {
            var elemType = $(ui.draggable).data("wdss.type");
            var control = $(ui.draggable)[elemType]("GetControl");

            //Fix the coords so they are on the grid
            var fixedTop = ui.position.top - (ui.position.top % self.gridSize);
            var fixedLeft = ui.position.left - (ui.position.left % self.gridSize);

            fixedLeft = Math.max(0, Math.min(self.element.innerWidth() - control.outerWidth(), fixedLeft));
            fixedTop = Math.max(0, Math.min(self.element.innerHeight() - control.outerHeight(), fixedTop));

            //Set the control's positon and add it to this
            control.css({ top: fixedTop, left: fixedLeft });
            control.appendTo(self.element);
         }