fix: aplica um lazy loading no sortable do jquery ui pelo evento mouseenter.

frontend/src/__apps/compilacao/js/old/compilacao_edit.js

@@ -1,4 +1,3 @@
-
 const _$ = window.$
 
 window.DispositivoEdit = function () {
@@ -500,38 +499,47 @@ window.DispositivoEdit = function () {
   }
 
   instance.reloadFunctionsDraggables = function () {
-    _$('.dpt-alts').sortable({
+    const dptAlts = _$('.dpt-alts')
-      revert: true,
+    if (dptAlts.length > 0) {
-      distance: 15,
+      dptAlts.sortable({
-      start: function (event, ui) {
+        connectWith: '.dpt-alts',
-      },
+        items: '.sorting-initialize',
-      stop: function (event, ui) {
+        revert: true,
-        const pk = ui.item.attr('pk')
+        distance: 15,
-        const bloco_pk = ui.item.closest('.dpt-alts').closest('.dpt').attr('pk')
+        start: function (event, ui) {
-
+        },
-        const url = pk + '/refresh?action=json_drag_move_dpt_alterado&index=' + ui.item.index() + '&bloco_pk=' + bloco_pk
+        stop: function (event, ui) {
-        _$.get(url).done(function (data) {
+          const pk = ui.item.attr('pk')
-          // console.log(pk + ' - ' + bloco_pk)
+          const bloco_pk = ui.item.closest('.dpt-alts').closest('.dpt').attr('pk')
-          // reloadFunctionsForObjectsOfCompilacao();
+
-        })
+          const url = pk + '/refresh?action=json_drag_move_dpt_alterado&index=' + ui.item.index() + '&bloco_pk=' + bloco_pk
-      }
+          _$.get(url).done(function (data) {
-    })
+            // handle data if needed
+          })
+        }
+      })
+      dptAlts.find('.dpt').one('mouseenter', function () {
+        $(this).addClass('sorting-initialize')
+        dptAlts.sortable('refresh')
+      })
 
-    _$('.dpt-alts .dpt').draggable({
+      _$('.dpt-alts .dpt').draggable({
-      connectToSortable: '.dpt-alts',
+        connectToSortable: '.dpt-alts',
-      revert: 'invalid',
+        revert: 'invalid',
-      zIndex: 1,
+        zIndex: 1,
-      distance: 15,
+        distance: 15,
-      drag: function (event, ui) {
+        drag: function (event, ui) {
-        // _$('.dpt-comp-selected').removeClass('dpt-comp-selected');
+          _$('.dpt-alts').addClass('drag')
-        _$('.dpt-alts').addClass('drag')
+        },
-      },
+        stop: function (event, ui) {
-      stop: function (event, ui) {
+          _$('.dpt-alts').removeClass('drag')
-        _$('.dpt-alts').removeClass('drag')
+        }
-      }
+      })
-    })
 
-    _$('.dpt-alts').disableSelection()
+      dptAlts.disableSelection()
+    } else {
+      console.warn("No '.dpt-alts' elements found to make sortable/draggable.")
+    }
   }
   instance.scrollTo = function (dpt) {
     try {
@@ -570,7 +578,9 @@ window.DispositivoEdit = function () {
       instance.triggerBtnDptEdit(href[1])
     }
     _$('main').click(function (event) {
-      if (event.target === this || event.target === this.firstElementChild) { instance.clearEditSelected() }
+      if (event.target === this || event.target === this.firstElementChild) {
+        instance.clearEditSelected()
+      }
     })
     instance.waitHide()
   }