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未捕获的TypeError：无法读取属性 'removeChild'为空在$。（/ form-builder / anonymous function）。（（匿名函数）._ clear （http://localhost/form-builder/external-scripts/jquery-ui/jquery-ui.js:16692:36）在$。（/ form-builder / anonymous function）。（（匿名函数）._ 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）在你（jquery.min.js：2）在Object.fireWith [as resolveWith]（jquery.min.js：2）在你（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 ] );                        
    }
}

希望此代码对您有所帮助。

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

1 个答案: