我正在使用 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类似问题
最佳答案
要实现此目的,您需要在 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 ] );
}
}
希望这段代码对您有帮助。
关于javascript - 可拖动停止事件上可放置/可排序元素的空 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54720874/