0

我正在使用默认的 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类为即将移动到另一个列表的元素（即底层项目）提供边框。

4

1 回答 1

1

尽管在线演示似乎已关闭，但您可以检查此插件以进行交换。

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

SO上的这篇文章是在同一条线上。

这对于移动元素的索引也很有帮助。

于 2012-06-05T10:29:20.920 回答