在可拖动停止事件上的空白/可排序元素的空HTML

Question

我正在使用jQuery UI进行拖动和排序以创建拖放形式的构建器。当用户停止拖动时，我希望可辍学的区域为空，因为我使用的是可重新流动区域的函数。

我尝试使用draggable停止事件中使用jquery empty（）

let initDrag = () => {
    $( ".draggable" ).draggable({
        connectToSortable: ".droppable",
        helper: "clone",
        revert: "invalid",
        stop: afterDrop
    })
}
let initSortable = () => {
    $( ".droppable" ).sortable({
        revert: true
    });
}
let afterDrop = (event, ui) => {
    let fieldID = $(event.target).attr("data-id")
    $(formTag).html(""); //This is where the problem is
    getFieldData(fieldID).then(fieldData => {
        fieldData[0].field.field_id = Date.now();
        formBuildingJSON.form_fields.push(fieldData[0]);
        appendFieldsMarkup()
    })
    $(ui.helper[0]).remove()
}

我希望第二行Afterdrop（）能够清空表单标签。bu这给了我一个错误。

`

jQuery-ui.js：16692未访问的TypeError：无法阅读属性 null的" removechild" at $。（/form-builder/匿名函数）。（匿名函数）._ clear （http：//localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js：16692：36） at $。（/form-builder/匿名函数）。（匿名函数）._ clear （http：//localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js：144：25） 在htmllielement。（jQuery-ui.js：15688） 在htmllielement.r.complete（jquery.min.js：2） 在u（jquery.min.js：2） 在object.firewith [as asolveWith]（jquery.min.js：2） 在u（jquery.min.js：2） 在function.w.fx.tick（jquery.min.js：2） at（jquery.min.js：2）`

这是类似问题的jsfiddle

Answer 1

要实现这一目标，您需要在jquery-ui.js文件中进行修改。有以下文本的行：

this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] );

您需要用以下代码替换：

if (this.placeholder[ 0 ].length) {
    if (this.placeholder[ 0 ].parentNode.length) {
         this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] );                        
    }
}

希望此代码对您有帮助。