jQuery可排序获取2个被交换的元素

时间:2010-02-15 02:07:31

标签: javascript jquery jquery-ui jquery-ui-sortable

我无法找到如何使用jQuery UI排序获取目标元素。

    $("#pages").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var first = ui.item; // First element to swap
            var second = ???? // Second element to swap
            swapOnServer(first, second);
        }
    });

我尝试的所有选项都指向被拖动的元素,但不是与其交换的元素:ui.item[0]event.srcElementevent.toElement

此外,this指向LIST(OL)元素。

第二我的意思是:

原始订单是:

  

| 0 | 1 | 2 | 3 |

我们拖动元素1并将其放在第3位。最终会得到:

  

| 0 | 3 | 2 | 1 |

所以第一个元素是1,第二个元素是3(错误!见下文)。

更新:我意识到我弄错了。这种情况下的新订单将是。

  

| 0 | 2 | 3 | 1 |

结果我的问题真的没有意义。谢谢大家的帮助。我会标记投票并标记答案。

所以问题是如何在这里获得第二个元素?


当前的解决方法(因为在sortable中没有交换这个术语)如下所示。它使用临时数组和订单。

    var prevPagesOrder = [];
    $("#pages").sortable({
        start: function(event, ui) {
            prevPagesOrder = $(this).sortable('toArray');
        },
        update: function(event, ui) {
            var currentOrder = $(this).sortable('toArray');
            var first = ui.item[0].id;
            var second = currentOrder[prevPagesOrder.indexOf(first)];
            swapOnServer(first, second);
        }
    });

谢谢,
德米特里。

5 个答案:

答案 0 :(得分:7)

您可以使用draggabledroppable代替sortable来实现可交换效果。在实践中,这将是这样的:

(function() {
    var droppableParent;

    $('ul .element').draggable({
        revert: 'invalid',
        revertDuration: 200,
        start: function () {
            droppableParent = $(this).parent();

            $(this).addClass('being-dragged');
        },
        stop: function () {
            $(this).removeClass('being-dragged');
        }
    });

    $('ul li').droppable({
        hoverClass: 'drop-hover',
        drop: function (event, ui) {
            var draggable = $(ui.draggable[0]),
                draggableOffset = draggable.offset(),
                container = $(event.target),
                containerOffset = container.offset();

            $('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200);

            draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200);
        }
    });
} ());

演示,http://jsfiddle.net/FZ42C/1/

答案 1 :(得分:6)

尝试使用serialize函数,该函数按顺序为您提供项目列表的哈希值。

如果您只需要删除新项目的项目,请执行以下操作:

$("#pages").sortable({
    opacity: 0.6,
    update: function(event, ui) {
        var first = ui.item; // First element to swap
        var second = ui.item.prev();
        swapOnServer(first, second);
    }
});
如果在列表的开头,

第二个将为null。

答案 2 :(得分:6)

看看“Swapable”jQuery插件:

http://plugins.jquery.com/project/Swapable

它类似于“可排序”,但只影响所选组的两个元素:拖动元素和删除一个被交换的元素。所有其他元素都保持在当前位置。此插件基于现有的“可排序”jQuery插件构建,并继承了所有可排序选项。

答案 3 :(得分:5)

本身并没有真正的“第二”项目。您有一个项目,而您只是将其放在另一个位置。它周围的物品相应地调整它们的位置。如果您想获得所有项目的数组,可以使用toArray方法。

答案 4 :(得分:0)

您可以使用http://plugins.jquery.com/project/Swapable

但这不是太好的插件