Question

我正在使用默认的jQueryUI连接可排序列表。但我需要一些（据我所知）不是默认功能。我希望有人在这里知道一个简单的方法来实现我想要的东西（也许是一个插件？）。我找不到任何直接的解决方案。

就像我说的，我正在使用默认的连接排序：http://jsfiddle.net/KLvdn/

这一切都有效。我可以将项目从一个列表拖放到另一个列表。但我真正想要的是能够从一个列表中拖动一个项目，将其放在另一个列表中另一个项目的顶部并使它们交换。

所以步骤;

我从左侧列表中拖出“第1项”
我将其放入右侧列表中的“第3项”
“第1项”将位于“第3项”
“Item3”将移至“项目1”所在地点的左侧列表。

这已经可以了吗？

我的解决方案

这就是我最终所做的。

我需要一种方法从另一个列表中的项目顶部的一个列表中删除项目。删除后，它下面的项目应自动放在另一个列表中。因此，撇开这两个项目。

首先，我在连接列表中添加了三个属性：

var _index = null;
$("#field-mylist, #test-mylist").sortable({
    connectWith: ".mylist",
    placeholder: 'ui-placeholder', // <-- VERY IMPORTANT
    change: function (event, ui) {
        markForReplacement('mylist', ui);
    },
    update: function (event, ui) {
        updateConnectedLists('mylist');
    }
}).disableSelection();

更改和更新事件调用的两个函数：

function markForReplacement(position, ui) {
    var total = 0;
    $('#field-' + position + ' .player').each(function (index) {
        $(this).removeClass("selected-item");
        total++;
    });

    var index = ui.placeholder.index();
    if (total < (index + 2)) {
        $('#field-' + position + ' div:eq(' + (index - 1) + ')').addClass("selected-item");
        _index = (index - 1);
    } else {
        $('#field-' + position + ' div:nth-child(' + (index + 2) + ')').addClass("selected-item");
        _index = (index + 2);

    }
}

function updateConnectedLists(position) {
    if (_index === null)
        return;

    $('#field-' + position + ' div:nth-child(' + (_index) + ')').insertAfter($("#test-" + position + " .player"));
    _index = null;

    // Reset class styles
    $('#test-' + position + ' .player').each(function (index) {
        $(this).removeClass("selected-item");
    });

    $('#test-' + position).sortable('refresh');
}

要添加的另一个重要事项是以下CSS样式：

.ui-placeholder {
    float: left;
}

.selected-item{
    border-color: #FF6600 !important;
}

使用 ui-placeholder ，您实际上可以将项目放在另一个项目的顶部（在发布之前）。 .selected-item 类为即将移动到另一个列表的元素提供边框（因此底层项目）。

Answer 1

你可以查看swap的这个插件，虽然在线演示似乎已经失效。

免责声明我自己没试过这个插件。

SO上的这篇文章在同一行。

This也可以帮助获取元素的索引。

jQuery交换项目与连接列表

1 个答案: