Drag & drop index re-ordering

Hello,

Thanks for such useful plugin, it’s very easy to use. In my current setup I have added the ability to drag & drop the repeater items and it works fine, the only issue is that the index is messed up. I’ve read the already closed issue https://github.com/DubFriend/jquery.repeater/issues/9 but I’m not able to understand how to call the reset index functionality from the drag & drop script.

I’m using jquery sortable for the drag and drop functionality:

jQuery(".repeater-table").sortable({
    axis: "y",
    cursor: 'pointer',
    opacity: 0.5,
    placeholder: "row-dragging",
    delay: 150,
    handle: ".sort-option",
    update: function(event, ui) {
        // stuff to do on sorting update.
    }

}).disableSelection();

And this is the repeater function

jQuery('.wpumcf-field-repeater-options').repeater({
    show: function() {
        jQuery(this).slideDown();

        jQuery('.repeater-wrapper').animate({
            scrollTop: jQuery('.repeater-table').height()
        }, 300);
    },
    hide: function(deleteElement) {
        if (confirm(wpum_admin_js.confirm)) {
            jQuery(this).slideUp(deleteElement);
        }
    },
    ready: function(setIndexes) {
        $dragAndDrop.on('drop', setIndexes);
    },
    isFirstItemUndeletable: true
});

Have you got any example on how to call the reset functionality from another script ?

Thank you.

[DeeJ]

For anyone stumbling across this years later… Here some actual working code, slightly modified from above.

Noticeable differences:

• variantRepeat.repeater( 'setIndexes' ); removed from sortable update function. This is actually re-initializing another instance of repeated every time the elements are drag & dropped meaning if you go to add another repeating row after drag & drop you get multiple rows added, one for each instance of reapeter initialized so far
• sortable.on("sortstop", setIndexes); ‘sortstop’ instead of ‘sortchange’ in the repeater ready function. ‘sortchange’ appears to be fired before everything is finished so the reindexing doesn’t work. ‘sortstop’ fixes this

$(document).ready(function() { const variantRepeat = $('.variant-repeater'); const sortable = $(".sortable").sortable(); variantRepeat.repeater({ show: function () { $(this).slideDown(); // Feather Icons if (feather) { feather.replace({ width: 14, height: 14 }); } }, hide: function (deleteElement) { if (confirm('Are you sure you want to delete this element?')) { $(this).slideUp(deleteElement); } }, ready: function(setIndexes) { sortable.on("sortstop", setIndexes); // sortstop instead of sortchange } }); });

Edit: Apologies for formatting, the codeblock is doing funny buggers for me

[DubFriend]

Hmm, I would check to see if the “show” callback is being called twice. It looks like dom click events may be getting bound twice here:

update: function(event, ui) {
    // I think this may be causing the problem. 
    // Calling repeater a second time here will rebind
    // click events. Now when clicking the "add" button, 
    // the click event to create a new item will
    // be called twice.
    options_repeater.repeater( 'setIndexes' );
}

$().repeater should only be called once on a set of dom elements.