用户界面中的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/