Question

I need to make an application that has 5 images in a specific order on the middle of the screen, I then want to be able to drag an image out of this list of images somewhere away at the side of the screen. Then have the ability to drag the element back in to the list, but for it to move itself back to its original position, as the list must be in the right order such as 1.2.3.4.5 and dragging 3 and 4 out would make the list of images be 1.2.5. Is this possible to do in jquery?

Answer 1

The best option is using jQuery UI and its sortable function. It allows you to drag and drop between html lists.

http://jqueryui.com/demos/sortable/#connect-lists

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

In the above example you will need to lists with ids #sortable1, #sortable2. connectWith allows you to define which element these lists will connect with. By appling .connectedSortable to #sortable1, #sortable2 you will be able to drag and drop between them.