Question

我正在研究基于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();
    }
});

工具箱项目

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

对此的任何帮助将不胜感激！很抱歉没有评论，这只是一个实验版本，看看我想要的是否可以完成

编辑1

在ryuutatsuo的评论之后，我尝试了一些事情并让它发挥作用，但我不相信这是实现我想要的正确方法。这是新代码：

$.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

我改变了drop的处理方式，以便它是一个匿名函数，这解决了这个问题。我相信我的错误是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);
         }

JQueryUI将数据从droppable传递到draggable

编辑1

1 个答案: