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

Question

I am trying to make the list items (cards) sortable, but for usability improvements I want to show the user an placeholder on the old (with text "FROM") and one on the new (with text "TO") before user releases mouse (ends .sortable).

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

right above, you see what I have for now, but is it possible to split "FROM" and "TO"?

Answer 1

I made it myself. Was quite complicated to introduce a second "placeholder" on old position. See here:

If you move an li, you now have an "FROM"-Container at old-pos and and "TO"-Container on future-pos, wich will be removed after positioning.

    $(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();
});