Unable to Drag and drop on sortable section #2330
Description
Hi, We upgraded jquery UI 1.10.2 to 1.14.0 and using jquery 3.6.3.
We have a list of items to drag (using draggable) and dropping on section(using sortable), we are building helper template dynamically. When template have multiple items getting below error and adding a div with ui-sortable-helper class also before this error helper template design is get disturbing.
HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent
please find the below code and attached screenshots in docx file
makeSidebarSortable: function (sectionIndex) {
$("#ts-form-editor-wrapper .form-elements li").draggable({
appendTo: $("body"),
delay: 50,
connectToSortable: "#section" + sectionIndex,
scroll: false,
helper: "clone",
revert: "invalid",
start: function () {
App.form.uiFormFields.addingNewItem = true;
},
helper: function (event) {
return App.form.uiFormFields.dragFormField(event);
},
stop: function () {
$("#tsForm-editor").removeClass("on-dragging");
App.form.uiFormFields.addingNewItem = false;
}
}).disableSelection();
},
makeSectionSortable: function (sectionIndex) {
var sectionSelector = "#section" + sectionIndex;
$(sectionSelector).sortable({
items: ".form-element-wrapper",
delay: 100,
opacity: 0.5,
scroll: false,
tolerance: "pointer",
helper: "clone",
connectWith: "#ts-form-editor-wrapper .form-elements li",
cancel: ".form-spreadsheet, input, textarea, .document-builder-parameters-form",
start: function (event, ui) {
App.form.uiFormFields.sortFormField($(this), ui);
},
stop: function () {
$("#tsForm-editor").removeClass("on-dragging");
App.form.uiFormFields.forcePositionUpdate = false;
},
receive: function (event, ui) {
var newItem = ui.item.clone().removeAttr("style");
ui.helper.replaceWith(newItem);
if (ui.item.data("type") === "") {
App.form.uiFormFields.createNewFormFieldBlock(ui);
} else {
App.form.uiFormFields.createNewFormField(ui);
}
},
sort: function (e, ui) {
// no need to scroll form for legacy UI
if (!App.global.isBeta) {
return;
}
//Need to update element top position while scrolling
// to display dragging item on correct position
if (App.form.uiFormFields.forcePositionUpdate) {
var offset = App.form.uiFormFields.initialScrollTop - App.form.uiFormFields.scrollWrapper.style.top.replace("px", "");
var topPosition = (ui.position.top + offset) + "px";
ui.helper[0].style.top = topPosition;
}
// we are still scrolling so no need to perform new scroll action
if (App.form.uiFormFields.lockScroll) {
return;
}
var h = ui.helper.outerHeight(true),
scrollWrapper = $("#tsForm-editor-middle-wrapper .mCustomScrollBox"),
scrollWrapperHeight = scrollWrapper.height(),
moveBy = scrollWrapperHeight / 4,
mouseCoordsY = e.pageY - scrollWrapper.offset().top;
var scrollUpdate;
if (mouseCoordsY < h) {
scrollUpdate = "+=" + moveBy;
App.form.uiFormFields.scrollForm(scrollUpdate);
} else if (mouseCoordsY > scrollWrapperHeight - h) {
scrollUpdate = "-=" + moveBy;
App.form.uiFormFields.scrollForm(scrollUpdate);
}
},
change: function () {
if (!App.global.isBeta || !App.form.uiFormFields.forcePositionUpdate) {
return;
}
// jquery ui sortable cache updates on change event.
if (!App.form.uiFormFields.lockScroll) {
// if we are not scrolling we dont need to update top position
// but we will start to do it on new scrolling event
App.form.uiFormFields.forcePositionUpdate = false;
} else {
//if we scrolling then we need to save new initial scroll top value
App.form.uiFormFields.initialScrollTop = App.form.uiFormFields.scrollWrapper.style.top.replace("px", "");
}
}
});
},