How can i reorder items or swap items in a list or lib(Drag and drop will be ideal)

Question

I have a project and one of the requirement is ti be able to re-order images ot items. So lets say they load the page and i have this 6 images.

1  2
3  4
5  6

and the users would like to swap 1 with 6 etc... Just like you do when ordering colums in the list settings. Or is it possible to use a drag and drop component? Would like to read from anyone who has done something similar. Thanks in Advance

Answer 1

This open source project does re-ordering using jQuery and the JavaScript Client Object Model - you should be able to adapt it for your needs.

http://sprello.codeplex.com/

The bulk of the code needed to do this is in WebPart.js -

http://sprello.codeplex.com/SourceControl/changeset/view/178c1d245922#SPrelloAssets%2fWebPart.js

Specifically

// If we have an order field to use then work out both what this item's order ID should be
// and update all other items in that column at same time
if (this.OrderField != null) {
    var cards = card.parent().children();
    for (i = 0; i < cards.length; i++) {
        var itemId = $(cards[i]).data("listId");
        if (itemId == mainItemId) {
            mainItemOrder = i + 1;
        }
        else {
            var item = this.List.getItemById(itemId);
            item.set_item(this.OrderField.get_internalName(), i + 1);
            item.update();
        }
    }
}

The rest of the code is for configuring it for different lists - something you may not need so you could do this as just a javascript file with no web part to deploy.

As Alexander mentioned - you're going to have performance problems with large lists, something to think about.

Answer 2

You could check out the CodePlex project "Drag & Drop for SharePoint, that uses jQuery to achieve this: http://spdragdrop.codeplex.com/

Answer 3

Use javascript on the client side and then sent the http request to the server with the new order. On the server side use SP API to save the new order of the items in the list.