Unable to Drag and drop on sortable section

[bala-mitratech]

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;

SortableError.docx

    },
    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", "");
         }
     }
 });

},

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, please provide a runnable test case on a platform like JS Bin.

[bala-mitratech]

Hi @mgol Thanks for the reply.
Issue is in our code. we are using same class for Helper html and sortable items property. removing that class from items in the sortable is working fine that.