Kombination von jQuery draggable, droppable und sortable

Question

Ich versuche jQuery draggable, droppable und sortable zu kombinieren, habe jedoch immer Probleme. Kann mir jemand helfen?

Grundsätzlich wird die Idee hier illustriert:

• Die Kacheln A, B, C, D, E können zwischen dem oberen droppable und dem sortable verschoben werden.
• Die benutzerdefinierte (*) Kachel kann nur zwischen dem linken droppable und dem sortable verschoben werden.

Außerdem versuche ich, alles jederzeit deaktivieren und reaktivieren zu können, wenn nötig.

---

Das ist das, was ich habe, aber es funktioniert nicht richtig und sieht nicht schön aus:

JS

var gameContainer = $(".game");

var myTray = $(".tray").sortable({
    containment: gameContainer,
    helper: "clone",
    revert: 100,
    tolerance: "pointer",
    update: function(ev, ui) {
        ui.item.addClass("ontray").css({
            "left": "0px",
            "position": "static",
            "top": "0px"
        });
    }
}).disableSelection();

var setTileDraggable = function(tileSelector) {
    tileSelector.draggable({
        connectToSortable: myTray,
        containment: gameContainer,
        helper: "original",
        revert: "invalid"
    }).disableSelection();
};

var myBoard = $(".board").droppable({
    accept: ".tile:not(.red)",
    drop: function(ev, ui) {
        if (ui.draggable.hasClass("ontray")) {
            // Kachel (nicht rot) kommt vom Tray, platziere sie in .tiles child div
            var cloneTile = ui.draggable.clone().removeClass("ontray").show();
            myBoard.children(".tiles").append(cloneTile);
            var dropx = ui.offset.left - myBoard.offset().left;
            var dropy = ui.offset.top - myBoard.offset().top;
            cloneTile.css({
                "left": dropx + "px",
                "position": "absolute",
                "top": dropy + "px"
            });
            setTileDraggable(cloneTile);
            ui.helper.remove();
            ui.draggable.remove();
        }
    }
}).disableSelection();

var myCustomTile = $(".custom").droppable({
    accept: ".tile.red",
    drop: function(ev, ui) {
        if (ui.draggable.hasClass("ontray")) {
            // Rote Kachel kommt vom Tray
            var cloneTile = ui.draggable.clone().removeClass("ontray").show();
            myCustomTile.append(cloneTile);
            setTileDraggable(cloneTile);
            setTileClick(cloneTile);
            ui.helper.remove();
            ui.draggable.remove();
        } else {
            // Rote Kachel bleibt, bewege sie zurück zur ursprünglichen Position
            ui.draggable.stop(true, false).animate({
                "left": "0px",
                "top": "0px"
            });
        }
    }
}).disableSelection();

// Drag-and-drop einrichten
setTileDraggable(myBoard.children(".tiles").find(".tile"));
setTileDraggable(myCustomTile.find(".tile"));

HTML

            D
            B
            E

        X

        C
        A

Answer 1

Es ist ein viel einfacheres Projekt, wenn Sie alle Ihre Boxen sortierbar machen, da sie bereits Methoden haben, um leicht miteinander zu verbinden. Hier ist eine schnelle Implementierung Ihres Beispiels:

Live-Demo

$('.alpha').sortable({
  connectWith: '.gamma',
  receive: function (event, ui) {
    if ($(ui.item).hasClass('special')) {
      ui.sender.sortable('cancel');
    }
  }
});

$('.beta').sortable({
  connectWith: '.gamma',
  receive: function (event, ui) {
    if (!$(ui.item).hasClass('special')) {
      ui.sender.sortable('cancel');
    }
  }
});

$('.gamma').sortable({
  appendTo: document.body,
  items: '.tile',
  connectWith: '.alpha, .beta',
  receive: function (event, ui) {
    //console.log(event, ui.item);
    //ui.item.remove(); // entferne das originale Element
  }
});

Sie können sehen, dass es hauptsächlich darum geht

• das Einrichten von Sortiermöglichkeiten und
• das Erstellen benutzerdefinierter Receive-Ereignisse, die bestimmte Arten von Kacheln akzeptieren oder ablehnen, basierend auf Ihren Spezifikationen

Answer 2

Okay, ich konnte es herausfinden: http://codepen.io/anon/pen/jxDCt Das funktioniert tatsächlich gut.