javascript - jQuery拖放到突出显示的框

Question

我有这个脚本。好吧，我希望士兵只被放在突出显示的盒子上。我尝试了 accept: $(selector) 和 revert: "invalid" 但似乎它甚至不允许在未突出显示的框中删除它。

Answer 1

最初禁用所有 droppables，然后在拖动开始例程中使$('.cell .validmove')droppable，并向可拖动对象添加一个revert: "invalid"选项，以便在未放入有效单元格时移回，如果这是你想要的。顺便说一句，您可能会更好地拥有在drag()事件中的例程start()并恢复为 on stop()，因为drag()事件会随着您的移动而持续触发。

unit.draggable({
    start: function() {
        startGrid.addClass("validmove").droppable("option", "disabled", false);
    },
    stop: function() {
        startGrid.removeClass("validmove").droppable("option", "disabled", true);
    },
    cursor: "move",
    revert: "invalid"
});

如果您希望单元捕捉到网格，请指示它使用 中的网格/捕捉选项draggable()，或者在事件中添加一些代码drop()以动画单元放置。

注意。CSS 在 Chrome 中不能正常工作，网格不显示，在 Firefox 中工作正常。