Question

我正在尝试使用Gulp Modules实现基于UI的拖放项目构建器。目前，我的项目有三个容器（div） - 第一个容器将每个Gulp模块的表示形式保存为div，第二个容器充当任务管道，设置Gulp模块的源和目标，以及单击Gulp模块时会触发最后一个，以配置各种选项。

我目前遇到的问题是每个Gulp模块的丢弃功能，基于以下代码：

    //drop gulp module into each task 
    this.makeDroppable = function (element) {
        var droppedModule;
        $(element).droppable({
            accept: ".gulp-module",
            drop: function (event, ui) {
                var self = this;
                console.log("Before new ID: ", this);
                if ($(ui.draggable).hasClass("classAdded")) {
                    $(this).removeClass("classAdded");
                    return;
                }
                droppedModule = $(this).append($(ui.draggable).clone().addClass("classAdded").attr("id", ("task-" + Date.now())));
                console.log("After new ID: ", this);
            }
        }).sortable();
    };

我试图将删除的每个模块的新ID与通过Gulp Module Class创建的表单相关联，如下所示：

    function GulpModule(jsonData) {

    this.name = jsonData.name;
    this.info = jsonData.info;
    this.gulpModuleId = ("module-" + Date.now());

    this.inputLabels = [];
    this.inputFields = [];

    this.optionsForm = "<h3>" + this.name + "</h3><form id='form-"
        + this.gulpModuleId + "' class='form' method='post'>";

    // Get and Set the name of the gulp module
    this.getName = function () {
        return this.name;
    };

    this.setName = function (newName) {
        this.name = ((newName.length > 0) ? (newName) : this.name);
    };


    // Get and Set the data for the gulp module
    this.getInfo = function () {
        return this.info;
    };

    // Create a drag event for the gulp module object
    this.moduleDragEvent = function (element) {
        $(element).draggable({
            helper: "clone"
        });
    };

    // Create the HTML element for the gulp module object and add it to the DOM
    this.createElement = function () {
        var element = $("<div></div>")
            .attr("class", "gulp-module")
            .attr("id", this.gulpModuleId)
            .append($("<h5></h5>").text(this.name))
            .data("info", this.info)
            .data("form", this.createOptionsForm())
            .appendTo("#gulp-modules");
        this.moduleDragEvent(element);
    };

    // Create the form options for gulp modules that can be configured
    this.createOptionsForm = function () {
        var info = this.getInfo(),
            labelInfo = Object.keys(info.params),
            newInputObject,
            i;
        for (i = 0; i < labelInfo.length; i += 1) {
            this.inputLabels.push("<label for='" + labelInfo[i] + "'>" + labelInfo[i] + "</label>");
            newInputObject = new InputElement(info.params[labelInfo[i]]);
            this.inputFields.push(newInputObject.createInputElement());
            this.optionsForm += (this.inputLabels[i] + "<br>" + this.inputFields[i] + "<br><br>");
        }
        this.optionsForm += "</form>";
        // console.log(this.optionsForm);
        // $("#module-options").append(this.optionsForm);
    };
}

在这个类之外，我为一个JSON文件创建了一个XMLHttpRequest，该文件包含每个模块的数据，这就是我解析它们的方式 - 通过一个循环创建Gulp模块的新实例并将相关数据与它

然而，当我删除它时，我需要它将drop上生成的新ID与新表单相关联，以便它指向该模块的表单。我甚至不需要最初关联一个表格;只有当它被丢弃时，我设置它的方式对我来说才有意义。

通过从GulpModule对象中取出表单构建功能，还是通过修复drop功能，是否有更简单的方法来解决这个问题？

感谢任何帮助。谢谢！

具有唯一ID

0 个答案: