UI Drag'n'Drop в JQuery

Question

Я работаю над интерфейсом Drag'n'Drop. Все работает ок. Мне нужна помощь с некоторыми дополнительными функциями.

У меня есть 3 столбца с перетаскиваемыми элементами. Каждый элемент имеет номер заголовка: 1,2,3, ... Я хочу изменить номер в заголовке панели, чтобы отразить порядок панели в столбце (поэтому, если вы перетаскиваете панель вверх, она становится 1 и панели под ним 2, 3 и т. д.).

Answer 1

Это то, что вы хотите?

$( ".content .draggable-area" ).sortable({
    connectWith: ".draggable-area",
    tolerance: "pointer",
    cursor: "move",
    cursorAt: {top: 10, left: 10},
    distance: 30,
    opacity: 0.8,
    stop: function(event, ui) {
        $('.draggable-area').each(function(){
            $(this).find('.draggable-box').each(function(){
               $(this).find('h2').html($(this).index()+1); 
            });
        });
    }
});

демо
http://jsfiddle.net/Xr3ne/1/