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

Question

我一直在玩jQuery UI可排序和可拖动,我正在寻找一种方法来嵌套列表项(只有第一级和第二级),具体取决于它们在列表中的放置位置.

简单的JSFiddle我想做的例子:http://jsfiddle.net/picitelli/XZ4Tw/

$(".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
    }
});

我希望能够拖动列表项并将其放在另一个列表项之前/之后,并且取决于我离列表的左侧(x)有多远,以及我距底部/顶部的距离(y)在我附近的列表项中,它将使该列表项成为第一级和第二级项.例如,如果我将一个列表项拖到另一个上面,并且我更接近我正在盘旋的列表项的底部,那么如果我离底部更远,如果我放下它将会捕捉到它所述列表项的底部是第一级项目.如果我要将该列表项更远地移动并放下它,它将捕捉到底部并成为第二级项.占位符也会更新,只是在悬停时调用一个类,以显示删除的列表项在实际删除之前是第一级还是第二级.

根据上面的小提琴,在drop方法中,我正在检查拖动列表项距离左侧的距离.如果它大于或等于20px,我将添加一个缩进列表项的"二级"类.如果它小于20px,我将添加一个"第一级"类,使列表项保持向左冲洗.仅用于左(x)计算,这是有效的,但它不是将类应用于删除的列表项,它将它们应用于它已"跳过"的列表项.我没有调用正确的方法来执行此操作吗？此外,我将如何执行此类计算以确定列表项将在何处捕捉,具体取决于它与我悬停的列表项的距离(y)是多少？

任何反馈/方向将不胜感激.

Answer 1

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

这是我想出的一个例子:使用sortable事件.

CSS

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

jQuery的

$(".items").sortable({
    connectWith: ".items",
    placeholder: "placeholder",
    update: function(event, ui) {
        // update
    },
    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');
        }
    },
    sort: function(event, 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');
        }
    }
});

小提琴