jQuery UI可排序/可拖动嵌套示例

$(".items").sortable({
    connectWith: ".items",placeholder: "placeholder",update: function(event,ui) {
        // update
    },sort: function(event,ui) {
        // sort
    }
});
$(".item").droppable({
    accept: ".item",hoverClass: "dragHover",drop: function( event,ui ) {
        console.log('drop');
        if (ui.position.left >= 20) {
            $(this).removeClass("first-level");
            $(this).addClass("second-level");
        } else {
            $(this).removeClass("second-level");
            $(this).addClass("first-level");
        }
    },over: function( event,ui ) {
        // over
    },activate: function( event,ui ) {
        // activate
    }
});

好吧,我认为你的问题看起来像是一个有趣的挑战..而且我对如何做到这一点有所了解但不确定..所以我试了一下.希望这将是有用的..我不确定它是否能满足你所​​需要的一切,如果有什么东西丢失,请告诉我.谢谢.

这是我想出的一个例子：使用可排序的事件.

CSS

.placeholder-sub {
    BACkground: #fff;
    border: 1px dashed #ccc;
    height: 50px;
    width: 480px;
    margin-left: 20px;
}

jQuery的

$(".items").sortable({
    connectWith: ".items",start: function(event,ui) {
        if(ui.Helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
        }
        else{ 
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
        }
    },ui) {
        var pos;
        if(ui.Helper.hasClass('second-level')){
            pos = ui.position.left+20; 
            $('#cursor').text(ui.position.left+20);
        }
        else{
            pos = ui.position.left; 
            $('#cursor').text(ui.position.left);    
        }
        if(pos >= 32 && !ui.Helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
            ui.Helper.addClass('second-level');
        }
        else if(pos < 25 && ui.Helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
            ui.Helper.removeClass('second-level');
        }
    }
});

Fiddle