Javascript 可拖放停止事件上可拖放/可排序元素的空HTML

我使用jQueryUI来拖动和排序，以创建拖放表单生成器。当用户停止拖动时，我希望可拖放区域为空，因为我正在使用重新填充可拖放区域的函数

我已经尝试在Dragable stop事件中使用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（）的第二行清空表单标记。但是它给了我一个错误

`

jquery ui.js:16692未捕获类型错误：无法读取属性 null的“removeChild” 美元（/表单生成器/匿名函数）。（匿名函数）。\u清除 () 美元（/表单生成器/匿名函数）。（匿名函数）。\u清除 () 至少有一个元素。（jqueryui.js:15688） 在htmlilement.r.complete（jquery.min.js:2） 在u（jquery.min.js:2） 在Object.fireWith[as resolveWith]（jquery.min.js:2） 在u（jquery.min.js:2） 在Function.w.fx.tick（jquery.min.js:2） at（jquery.min.js:2）`

---

这里有一个类似的问题

要实现这一点，您需要在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 ] );                        
    }
}

---

希望这段代码对您有所帮助。

您能做一些钢笔或小提琴来提高性能吗？好的，让我来try@RohitMittal请检查我添加到问题中的JSFIDLE，它使#sortable为空，但它也抛出了一个错误。所以想避免这个错误吗？是的。因为这个错误会停止代码的执行