Échangez des éléments lorsque vous faites glisser un sur un autre en utilisant jQuery ui

Voici un exemple de la manière dont vous pouvez échanger des éléments avec glisser-déposer http://jsfiddle.net/ 76YRN / 1 /

Une autre question sur l'échange d'éléments de jQuery Les articles druggistables jQuery perdent leur dragacité après avoir été échangés (avec jsfiddle exemple)

J'espère que cela aide

Vous venez de remplacer les éléments d'un à l'autre. Il y a quelque temps, j'ai créé une démonstration pour échanger des éléments entre la liste ultérieure. Vérifiez ça: http: //www.authorcode. com / swap-elements-quand-glisser-one-one-one-one-sur-un autre-ut-jquery-ui /

J'ai utilisé une combinaison de solutions pour arriver à cela, avec #Large_tiles et #small_tiles étant deux listes:

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