JQueryUI将数据从可拖放传递到可拖放

我正在开发一个基于JQuerUI的拖放控制系统。其想法是让“控件”（可拖动）从工具箱菜单（也可拖动）添加到“窗体”（可拖放）中。我设法使代码正常工作，以便将“控件”放到“窗体”上。我现在的问题是，在“表单”的drop函数中，我需要将信息从“表单”传递到“控件”。我的问题是，在drop函数中，当我引用this变量时，它不是“form”对象，而是一个DOM对象（我想，这一点还不太清楚）。 以下是迄今为止我掌握的代码：

窗体对象

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

控制对象

$.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();
    }
});

---

我改变了

drop

的处理方式，使其成为匿名函数，从而解决了问题。我认为我的错误是

这个
变量的范围。代码如下：

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

查看代码，它看起来像是您创建的wdss.form对象，然后它将自己变成了可拖放对象。因此，如果您执行类似$（“form”）.wdss.form（）的操作；首先this=$（“form”），然后添加可拖放对象this=$（“form”）=droppable对象。
$.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);
    }
});

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