Question

我正在尝试使列表项（卡片）可排序，但为了提高可用性，我想向用户显示旧版本的占位符（带有文本＆＃34; FROM＆＃34;）和新版本的一个（带有文本＆＃34; TO＆＃34;）在用户释放鼠标（结束.sortable）之前。

helper: 'clone',
placeholder: {
    element: function(currentItem) {
        return $('<li class="placeholder">FROM or TO</li>')[0];
    },
    update: function(container, p) {
        return;
    },
}

在上面，你看到我现在拥有的东西，但是有可能分开＆＃34; FROM＆＃34;和＆＃34; TO＆＃34;？

Answer 1

我自己做了。在旧职位上引入第二个“占位符”是相当复杂的。见这里：

如果你移动一个li，你现在在旧位置有一个“FROM”-Container，而在future-pos上有一个“TO”-Container，它将在定位后删除。

    $(function() {
    var oldList, newList, item;
    $(".selector").sortable({
        start: function(event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent().parent();
            var activeElem = item.index();
            $(this).children().eq(activeElem).after('<li class="placeholder">From</li>');
        },
        stop: function(event, ui) {
            //alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
            $(".selector > li").remove(".placeholder");
        },
        change: function(event, ui) {
            if(ui.sender) newList = ui.placeholder.parent().parent();
        },
        connectWith: ".selector",
        helper: 'clone',
        placeholder: {
            element: function(currentItem) {
                return $('<li class="placeholder">To</li>')[0];
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();
});

JQuery UI中的FROM和TO占位符：可排序

1 个答案: