Gallery Image Drag and Drop Image Order Change in WooCommerce

add_action('woocommerce_variation_options', [$this, 'addGalleryField'], 10, 3);

 public function addGalleryField($loop, $variation_data, $variation) {
        $gallery_images = get_post_meta($variation->ID, '_variation_gallery_images', true);
        $image_ids = $gallery_images ? explode(',', $gallery_images) : [];
        ?>
        <div class="form-row form-row-full" style=" margin-top: 10px;margin-bottom: 10px; border: 1px solid lightgrey; padding: 5px; border-radius: 5px">
            <label><?php esc_html_e('Gallery Images', 'variation-gallery'); ?></label>
            <ul id="gallery-container-<?php echo esc_attr($variation->ID); ?>" class="variation-gallery-container" style="margin-top: 5px">
                <?php foreach ($image_ids as $image_id): ?>
                    <li class="variation-gallery-item" data-image-id="<?php echo esc_attr($image_id); ?>">
                        <img src="<?php echo esc_url(wp_get_attachment_url($image_id)); ?>" alt="" width="60" height="60">
                        <button type="button" class="variation-gallery-remove" data-image-id="<?php echo esc_attr($image_id); ?>">
                            <span class="variation-gallery-remove-btn">&times;</span>
                        </button>
                    </li>
                <?php endforeach; ?>
            </ul>
            <input type="hidden" name="variation_gallery_image[<?php echo esc_attr($variation->ID); ?>]" id="variation-gallery-input-<?php echo esc_attr($variation->ID); ?>" value="<?php echo esc_attr($gallery_images); ?>" />
            <button type="button" class="button upload-variation-gallery-image" data-variation-id="<?php echo esc_attr($variation->ID); ?>"><?php esc_html_e('Upload Images', 'variation-gallery'); ?></button>
        </div>
        <?php
    }



add_action('admin_enqueue_scripts', [$this, 'enqueueAssets']);

  public function enqueueAssets() {
        wp_enqueue_media();
        wp_enqueue_script('jquery-ui-sortable');
        wp_enqueue_script('jquery'); // Ensure jQuery is loaded


        wp_enqueue_script(
            'variation-gallery-admin',
            plugin_dir_url(dirname(__FILE__)) . 'Assets/JS/admin.js',
            ['jquery', 'jquery-ui-sortable'],
            '1.0.0',
            true
        );
    }

JS part

function initializeSortable() {
        $(".variation-gallery-container").each(function () {
            const container = $(this);
            console.log("amat"); // Log message
            console.log(container); // Log the container object

            container.sortable({
                items: ".variation-gallery-item",
                cursor: "move",
                placeholder: "sortable-placeholder",
                forcePlaceholderSize: true,
                tolerance: "pointer",
                stop: function (event, ui) {
                    const variationId = container.attr("id").split("-").pop();
                    const inputField = $(`#variation-gallery-input-${variationId}`);

                    const updatedOrder = container.find(".variation-gallery-item").map(function () {
                        return $(this).data("image-id");
                    }).get();

                    inputField.val(updatedOrder.join(","));
                },
            });

            console.log(`Sortable initialized for #${container.attr("id")}`);
        });
    }

// Use a delay to ensure dynamic content is loaded
    setTimeout(initializeSortable, 500);

// Alternatively, listen for changes in the DOM
    const observer = new MutationObserver((mutationsList, observer) => {
        initializeSortable(); // Re-initialize sortable on DOM changes
    });
    observer.observe(document.body, { childList: true, subtree: true });