javascript - 可拖动停止事件上可放置/可排序元素的空 HTML

Question

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

我尝试在可拖动停止事件中使用 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: Cannot read property 'removeChild' of null at $.(/form-builder/anonymous function).(anonymous function)._clear (http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:16692:36) at $.(/form-builder/anonymous function).(anonymous function)._clear (http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:144:25) at 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 u (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 ] );                        
    }
}

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