Jquery sortable change number of element?

Question

I am using simple Jquery sortable that user can drag and drop element, but on every element i have some number, on loading screen all numbers are in order, but what i need whabe someone reoders element to auto chnage that number according to his selection. Here is working fiddle what i have

http://jsfiddle.net/4bhb4z1e/

I need when someone move etc. Number 10 to be the first to chnage that number to 1 and all others to reindex?

Here is code for now

<ol class="example">
    <li> <span>1</span>
        <ol></ol>
    </li>
    <li> <span>2</span>
        <ol></ol>
    </li>
    <li> <span>3</span>
        <ol>
            <li><span>4</span>
            </li>
            <li><span>5</span>
            </li>
            <li> <span>6</span>
                <ol>
                    <li><span>7</span>
                    </li>
                </ol>
                <ol>
                    <li><span>8</span>
                    </li>
                    <li><span>9</span>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li><span>10</span>
    </li>
</ol>

JS

$(function  () {
  $("ol.example").sortable()
})

UPDATE

Now i have structure like this 1, 2, 3, 4, 5 etc.

What i need when someone move 4 to first place to chnage that number to 1 and all other numbers to reorder, like I move number 4 to first place it chnage number to 1, and first that is under new 1 to chnage that number to 2 and further

Your Qn need to be more clear – Koti Panga Nov 10 '14 at 08:58 — Koti Panga, Nov 10 '14 at 08:58
Please read my update – Miomir Dancevic Nov 10 '14 at 09:03 — Miomir Dancevic, Nov 10 '14 at 09:03

skobaljic · Accepted Answer · 2014-11-10T12:18:23.127

4

That plugin has onDrop event, so you can update your code this way:

$(function () {
    $(".example").sortable({
        onDrop: function ($item, container, _super, event) {
            $('.example li').removeClass('dragged');
            $('.example li').removeAttr('style');
            $("body").removeClass('dragging');
            $('.example span').each(function (i) {
                var humanNum = i + 1;
                $(this).html(humanNum + '');
            });
        }
    });
});

Look at Fiddle!

edited Nov 10 '14 at 12:18

answered Nov 10 '14 at 11:07

skobaljic

9,379
1
25
51

Yes but please take a look at my code, it has nested OL? – Miomir Dancevic Nov 10 '14 at 11:28
The problem is that this example add some inline styling that mess up my view? http://jsfiddle.net/4bhb4z1e/12/ – Miomir Dancevic Nov 10 '14 at 11:46
Even more cleaner [here](http://jsfiddle.net/4bhb4z1e/14/). Those are just styles, you can adjust them the way you like. – skobaljic Nov 10 '14 at 11:50

score 4 · Answer 2 · answered Aug 12 '18 at 11:35

4

You can use the update event.

$(".example").sortable({
    update: function (event, ui) {
    $('.example span').each(function (i) {
            var numbering = i + 1;
            $(this).text(numbering);
        });
    }
});

answered Aug 12 '18 at 11:35

Mohd Abdul Mujib

13,071
8
64
88

score 1 · Answer 3 · answered Jun 19 '19 at 04:07

A CSS-only solution.

/* list container */
.example {
  counter-reset: seq;
}

/* list item to add number */
.example li>span:before {
  counter-increment: seq;
  content: "("counter(seq)") ";
}

Fiddle: http://jsfiddle.net/b9ythac6/
Browser support: https://caniuse.com/#feat=css-counters

Jquery sortable change number of element?

3 Answers3