具有连接列表的jQuery交换项

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

正如我所说，我正在使用默认的连接排序表：

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

循序渐进

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

---

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

您可以检查此插件，尽管在线演示似乎已关闭

免责声明我自己还没有尝试过这个插件

这篇文章在同一行

---

也有助于移动元素的索引。

我也发现了一个，并且注意到它不再工作了。我其实以为它过时了什么的。不过我还是要试试看。也许它仍然有效。希望它对你有效，也更新了我关于Swapt的类似帖子“swap”插件毕竟对我不起作用。我需要更多的定制。但我最终还是成功了。我使用了您提供的一个链接中的一些代码。所以我会把你的答案标记为最好的，因为你确实帮了我：-）-我也会试着编辑我的开场白并添加我所做的。也许将来它会对其他人有所帮助。

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

.ui-placeholder {
    float: left;
}

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