带有连接列表的jQuery交换项目

Question

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

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

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

所以分步进行；

• 我从左侧列表中拖动“项目 1”
• 我将它放到右侧列表中的“第 3 项”中
• “项目 1”将定位在“项目 3”的位置
• “Item3”将移动到“Item 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();

以及change和update事件调用的两个函数：

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 也有助于移动元素的索引。