在可拖动的停止事件上清空droppable / sortable元素的HTML

Question

我正在使用jQuery UI进行可拖动和可排序以创建拖放表单构建器。当用户停止拖动时，我希望可放置区域为空，因为我正在使用重新填充可放置区域的函数。

我尝试在draggable 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 Uncaught TypeError：无法在$。（/ form-b​​uilder / anonymous function）读取null的属性'removeChild'。（匿名函数）._ clear（http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:16692:36）at $。（/ form-b​​uilder / anonymous函数）。（匿名函数）._ clear（http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:144:25）在HTMLLIElement。 （jquery-ui.js：15688）at HTMLLIElement.r.complete（jquery.min.js：2）at u（jquery.min.js：2）at Object.fireWith [as resolveWith]（jquery.min.js： 2）at（jquery.min.js：2）at Function.w.fx.tick（jquery.min.js：2）at 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 ] );                        
    }
}

希望这段代码可以帮到你。