я пытаюсь объединить jQuery, перетаскиваемый, сбрасываемый и сортируемый; Однако у меня продолжают возникать проблемы. Кто-нибудь может мне помочь?

В основном, идея проиллюстрирована здесь:

Плитки A, B, C, D, E можно перемещать между верхней каплей и сортировкой.Настраиваемый (*) тайл можно перемещать только между левым и перетаскиваемым.

Также я'я пытаюсь быть в состоянии деактивировать и активировать все это на любом стоянии, когда это необходимо.

Это то, что у меня есть, но этоочень глючная и не красивая

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")) {
            // tile (not red) coming from tray, place it into .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")) {
            // red tile coming from tray
            var cloneTile = ui.draggable.clone().removeClass("ontray").show();
            myCustomTile.append(cloneTile);
            setTileDraggable(cloneTile);
            setTileClick(cloneTile);
            ui.helper.remove();
            ui.draggable.remove();
        } else {
            // red tile staying, move back to original position
            ui.draggable.stop(true, false).animate({
                "left": "0px",
                "top": "0px"
            });
        }
    }
}).disableSelection();

// set up draggables
setTileDraggable(myBoard.children(".tiles").find(".tile"));
setTileDraggable(myCustomTile.find(".tile"));

HTML

    
        
            D
            B
            E
        
    
    
        X
    
    
        C
        A