jQuery拖放到突出显示的框答案

【问题标题】：jQuery Drag and Drop to highlighted boxesjQuery拖放到突出显示的框
【发布时间】：2011-05-13 09:38:18
【问题描述】：

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

【问题讨论】：

+1 因为它是可放置系统的一个很好的例子。 :-)
我删除了死链接。

标签： javascript jquery drag-and-drop revert

【解决方案1】：

首先禁用所有可放置对象，然后在拖动开始例程中使 $('.cell .validmove') 可放置，并为可拖动对象添加一个 revert: "invalid" 选项，以便它在未放入有效单元格时移回，如果这是你的想。顺便说一句，您可能会更好地在start() 下拥有drag() 事件中的例程并在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 中工作正常。

【讨论】：