CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Prometheus
Prometheus

Reputation: 33625

Getting the position of an dragged item in JQuery

On dragging an item to a new location I would like to output the new position of the item. for example

Col = 1 Position = 3

meaning the widget has been moved to the first col 3rds down.

I am using this script http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

I think the best place to put this is at the point below. However I tried ui.item.index to get the new position and this just gives me the value - 1 not the position of the dragged object as excepted. Any ideas?

$(settings.columns).sortable({
    items: $sortableItems,
    connectWith: $(settings.columns),
    handle: settings.handleSelector,
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    revert: 300,
    delay: 100,
    opacity: 0.8,
    containment: 'document',
    start: function (e,ui) {
        $(ui.helper).addClass('dragging');
    },

    stop: function (e,ui) {
        alert("New position: " + ui.item.index());
        $(ui.item).css({width:''}).removeClass('dragging');
        $(settings.columns).sortable('enable');
    }
});

Upvotes: 3

Views: 1368

Answers (2)

ContentKing
ContentKing

Reputation: 13

Just to inform you: the script is currently not working on Internet Explorer 9 - the drag functionality fails to work.

I found the following 'workaround':

add 

<meta http-equiv="X-UA-Compatible" content="IE=8">

to your page.

Upvotes: 1

MikeM
MikeM

Reputation: 27405

Looking at the demo on the nettuts site: Demo

ui.item is already a jQuery object so you can reference it as such.

0-based index position of the column:

ui.item.parent().parent().children().index(ui.item.parent())

0-based index position of the item:

ui.item.parent().children().index(ui.item);

so if you were to drag an item underneath the "Welcome to iNettuts" in the first column the above code would return 0 for column (so the first column) and 1 for the item position (so the second item in the column)

Upvotes: 4

Related Questions