jQuery UI可排序/可拖动嵌套示例 [英] jQuery UI sortable/draggable nesting example

问题描述

我一直在使用可排序和可拖动的jQuery UI，我正在寻找一种方法来嵌套列表项(仅位于第一级和第二级)，具体取决于它们在列表上的位置.

I've been playing with jQuery UI sortable and draggable and I'm looking for a way to nest list items (only first and second level) depending on where they are dropped on the list.

我正在尝试做的简单JSFiddle示例: http://jsfiddle.net/picitelli/XZ4Tw/

Simple JSFiddle example of what I am trying to do: 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)我要放下的清单项目，它将使该清单项目成为第一级和第二级项目.例如，如果我有一个列表项拖到另一个列表项的顶部，而我离悬停的那个列表项的底部更近，那么如果我离底部越远，则将其放下，它会捕捉到所述列表项的底部，并且是第一级项.如果我要将该列表项移到更远的地方并将其放下，它将跳到底部并成为第二级项目.占位符也将进行更新，仅在悬停时调用一个类，以显示被删除的列表项在实际被删除之前将处于第一级或第二级.

I want to be able to drag a list item and drop it before/after another list item, and depending on how far I am from the left (x) of the list, and how far I am from the bottom/top (y) of the list item I am dropping near, it will make that list item either a first and second level item. For instance, if I have a list item dragged on top of another, and I am closer to the bottom of that list item that I am hovering over, than if I was farther away from the bottom, if I drop it it will snap to the bottom of said list item and be a first-level item. If I was to move that list item further away and drop it, it would snap to the bottom and be a second-level item. The placeholder would update as well, invoking a class, just on hover, to show that the dropped list item would be either first or second level before it is actually dropped.

按照上面的小提琴，在放置方法中，我正在检查拖动列表项离左侧有多远.如果大于或等于20px，则添加一个缩进列表项的第二级"类.如果小于20像素，则添加一个第一级"类，使列表项保持向左对齐.仅对于左(x)计算，这是有效的，但未将类应用于已删除的列表项，而是将其应用于已跳过"的列表项.我不是在调用正确的方法来执行此操作吗?另外，我将如何进行这种计算以确定列表项将在何处捕捉，具体取决于它与我将鼠标悬停在列表项上的距离(y)是多少?

Per the fiddle above, in the drop method, I am checking to see how far the dragged list item is from the left. If it is greater than or equal to 20px, I am adding a "second-level" class that indents the list item. If it is less than 20px, I am adding a "first-level" class that keeps the list item flush left. Just for the left (x) calculation, this is working but it is not applying the classes to the dropped list item, it applies them to the list item that it has "jumped" over. Am I not invoking the correct method to perform this? Also, how would I go about performing such a calculation to determine where the list item would snap depending on how far (y) it is from the list item I am hovering over?

任何反馈/指导将不胜感激.

Any feedback/direction would be greatly appreciated.

推荐答案

好吧，我认为您的问题看起来像是一个有趣的挑战. .希望这将是有用的..我不确定它是否能满足您的所有需求，所以如果有任何缺失，请告诉我.谢谢.

Well I thought you question looked like a fun challenge.. And I had some idea of how to do it but was not sure.. So I tried it out. Hopefully this will be useful.. I'm not sure if it does everything your looking for so if something is missing let me know. Thanks.

这是我想到的一个示例:使用sortable事件.

Here is an example that I came up with: Using the sortable events.

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');
        }
    }
});

小提琴

这篇关于jQuery UI可排序/可拖动嵌套示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！