Showing the index number

[jameselliott]

Hi @McPants,

On the demo page for Shapeshift you have a toggle for showing the index number.

How is that achieved and what do I need to have the same functionality?

Thanks for making shapeshift too, it's very useful!

James

[AshesOfOwls]

With the current version of shapeshift it will arrange all of the items dynamically. So basically if an item is at the 0 position in the visible grid, it will also be at the 0 position in the HTML.

So therefore all you have to do is find the element you want to get the index of, then do this:

$('.element_name').index();

Hope that helps. Thanks for the support!

[PratibhaP]

I did this but couldn't get current index of grids? In demo page index changed properly but not in my code.

[vunguyen-it]

You can using this event "ss-setTargetPosition", just don't know why they aren't mention this in the document.

Below is my code to change the index of all child elements when they are dragging as the live demo, hope this help

$("#orderable_container").on("ss-setTargetPosition", function (e) {
        e.target.childNodes.forEach(function (item) {
            var index = $(item).index();
            $(item).find('.position').text(index);
        });
    });

[yamil777]

They are using this code in the example page:

        $container.children().each(function() {
          $(this).prepend('<div class="position">'+$(this).index()+'</div>')
        });
        $container.on("ss-arranged", function(e, selected) {
          modifier = $(this).find(".ss-dragging")[0] ? 1 : 0

          $(this).children().each(function() {
            $(this).find(".position").html($(this).index() - modifier)
          })
        });