Reset jquery draggable elements

Question

I want to reset all elements in list to initial position. this is my example Jquery UI Droppable

this is my reset function

$(".reset").click(function() {
       // Code to reset all elements
});

How can i do it?

Answer 1

You can use the code below:

First set order attribute to items

// This code used for set order attribute for items
var numberOfItems = $("#gallery").find('li').length;
$.each($("#gallery").find('li'), function(index, item) {
    $(item).attr("order", index);
});

Change recycleImage function

function recycleImage($item) {
    $item.fadeOut(function() {
        $item
            .find("a.ui-icon-refresh")
            .remove()
            .end()
            .css("width", "96px")
            .append(trash_icon)
            .find("img")
            .css("height", "72px")
            .end()
            //.appendTo($gallery)                 
            .fadeIn();
            // Add to old palce
            addToOlderPlace($item);
    });
}

Add addToOlderPlace function

// This function used for find old place of item
function addToOlderPlace($item) {
    var indexItem = $item.attr('order');
    var itemList = $("#gallery").find('li');
    if (indexItem === numberOfItems - 1)
        $("#gallery").append($item);
    else if (indexItem === "0")
        $("#gallery").prepend($item);
    else
        $(itemList[indexItem - 1]).after($item);
}

Online demo (fiddle)