Question

我正在尝试组合jQuery draggable，droppable和sortable;但是，我一直有问题。有人能帮助我吗？

基本上，这个想法在这里说明： enter image description here

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

<div class="game">
    <div class="board">
        <div class="tiles">
            <div class="tile">D</div>
            <div class="tile">B</div>
            <div class="tile">E</div>
        </div>
    </div>
    <div class="custom">
        <div class="tile red">X</div>
    </div>
    <div class="tray">
        <div class="tile">C</div>
        <div class="tile">A</div>
    </div>
</div>

Answer 1

如果您将所有盒子排序，这是一个更容易的项目，因为它们现有方法可以轻松地相互连接。以下是您的示例的快速实现：

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(); // remove original item
  }
});

你可以看到它主要是

设置sortables和
根据您的规范创建接受或拒绝特定种类的切片的自定义接收事件

Answer 2

好的，我能够弄明白：http://codepen.io/anon/pen/jxDCt 这实际上运作良好。

结合jQuery draggable，droppable和sortable

2 个答案: