jQuery Drag and Drop to highlighted boxes

Question

I have this script. Well I wanted the soldier to be dropped only at the highlighted boxes. I tried accept: $(selector) and revert: "invalid" but it seems that it disallows it to be dropped even on the un-highlighted boxes.

Answer 1

Initially make all droppables disabled, then during the drag start routine make $('.cell .validmove') droppable, and add a revert: "invalid" option to the draggable, so that it moves back when not put in a valid cell, if that is what you want. Incidentally, you would probably be better having the routine you have in the drag() event under start() and reverting on stop(), as the drag() event fires continuously as you move.

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

If you want the unit to snap to the grid, either instruct it to using the grid/snap options in draggable(), or add some code in the drop() event to animate the unit in to place.

NB. The CSS isn't working properly in Chrome, the grid does not show up, works fine in Firefox.