Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drag & drop index re-ordering

See original GitHub issue


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 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:

    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.


And this is the repeater function

    show: function() {

            scrollTop: jQuery('.repeater-table').height()
        }, 300);
    hide: function(deleteElement) {
        if (confirm(wpum_admin_js.confirm)) {
    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.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

DeeJcommented, Mar 31, 2022

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

DubFriendcommented, Nov 2, 2015

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Drag&Drop reordering made easy - Loris Leiva
❡Step 1. Initialize and destroy Dragula · ❡Step 2. Multiple drag&drop lists · ❡Step 3. Listen to drag and listen to drop ·...
Read more >
Angular — An extremely simple and easy implementation of ...
Drag and drop list reordering is a very common feature of webpages with lists of data, such as Trello, Jira, etc.
Read more >
Angular DragDrop - how to reorder items - Stack Overflow
To make it simple i would like to reorder items also inside the same list. Bring one from the bottom to top, grab...
Read more >
How to REORDER List Items with Drag and Drop - YouTube
In this video we'll look at how to use Bubble's Drag and Drop plugin to reorder a list of to dos. This is...
Read more >
QML Drag and Drop including reordering the C++ model
The GridView Example adds drag and drop to a GridView, allowing you to visually reorder the delegates without changing the underlying ListModel.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found