Jquery UI可排序为＆＃34; swap＆＃34;列出碰撞中的元素

Question

如何修改jquery ui sortable，这样我就可以从第二个列表中的一个项目的列表中拖动一个项目，并让这两个项目在删除时交换位置？

https://jqueryui.com/sortable/#connect-lists

Answer 1

我使用了一系列解决方案来实现这一目标，其中#large_tiles和#small_tiles是两个列表：

$(function() {
$("#large_tiles li, #small_tiles li").draggable({
    zIndex: 2,
    appendTo: "body",
});

initDroppable($("#large_tiles li, #small_tiles li"));

initSwap();
function initSwap() {
    initDroppable($("#large_tiles li, #small_tiles li"));
    initDraggable($("#large_tiles li, #small_tiles li"));
}
function initDraggable($elements) {
    $elements.draggable({
        zIndex: 2,
        appendTo: "body",
        helper: "clone",
        start: function(e, ui) {
            $(ui.helper).addClass("clone");
        },
        cursorAt: { left:50, top:75 }
    });
}
function initDroppable($elements) {
    $elements.droppable({
        activeClass: "active-tile",
        hoverClass: "hover-tile",
        over: function(event, ui) {
            var $this = $(this);
        },
        drop: function(event, ui) {
            var $this = $(this);
            var linew1 = $(this).after(ui.draggable.clone());
            var linew2 = $(ui.draggable).after($(this).clone());
            $(ui.draggable).remove();
            $(this).remove();
            initSwap();
        }
    });
}
});