Making a jQuery UI droppable only accept one draggable at a time

Question

I have seen only a couple variants on this question asked a couple other places, notably here and here.

Basically, I have a checkers gameboard where each square on the board is a droppable and each gamepiece is a draggable. Each square can only have one piece on it at a time, and I am trying to toggle the enable/disable method depending on whether there's a piece on the square or not.

Here's a link to what I've got so far: http://jsbin.com/ayalaz, and below is the most pertinent code.

function handleDrop(e, ui) {
            var tileNumber = $(this).data('tile');
            // Make the gamepiece snap into the tile
            ui.draggable
                .data({ // WHAT IF PIECE IS SET BACK DOWN IN SAME TILE... CHECK FOR IT!
                    'preRow': ui.draggable.data('curRow'),
                    'preCol': ui.draggable.data('curCol'),
                    'curRow': $(this).data('row'),
                    'curCol': $(this).data('col')
                });
            $(this).append($(ui.draggable));
            ui.draggable
                .position({
                    of: $(this),
                    my: 'left top',
                    at: 'left top'
                });
            $(this).droppable('disable');
            //console.log("Gamepiece set down at: (" + $(this).data('row') + "," + $(this).data('col')+ ")");
        }

function handleOut(e, ui) {
            // HOW TO TOGGLE DROPPABLE??
            $(this).droppable('enable');
        }

Any advice?

Thanks in advance! Jeremy

pabo · Accepted Answer · 2012-05-03T20:42:11.527

2

It looks like you are successfully disabling droppable on a tile after the first drop event. Your problem is that you are not initially setting droppable to disabled on the initial set of occupied tiles.

After you've created your game board and pieces, this should accomplish that, assuming my CSS selector accurately reflects your structure:

$('div.gamePiece').parent().droppable("option", "disabled", true);

Note that this is different from the syntax to change droppability in the initial options. From the jQuery UI droppable documentation:

//initialize
$( ".selector" ).droppable({ disabled: true });

//setter
$( ".selector" ).droppable( "option", "disabled", true );

Edit

It appears I was wrong about $(this).droppable('disable'); and $(this).droppable('enable'); jquery-ui does have alias functions for enable and disable.

enable: function() {
    return this._setOption( "disabled", false );
},
disable: function() {
    return this._setOption( "disabled", true );
},

edited May 03 '12 at 20:42

answered Apr 27 '12 at 20:11

pabo

625
3
14

Thanks for the answer, @pabo. Your code does initialize the board tiles to 'disabled', but the 'dropout' event for the droppable (my function named 'handleOut') still isn't reactivating any of the tiles once they've already contained a gamepiece. – minttoothpick May 01 '12 at 17:08
@minttoothpick: `$(this).droppable('disable');` and `$(this).droppable('enable');` **do not work**. Use the 'setter' syntax I answered with, above: `$( ".selector" ).droppable( "option", "disabled", true );` – pabo May 02 '12 at 20:42
I was able to get my code function by using the original `$(this).droppable('disable');` method (before I saw your last comment)... my problem was that I needed to move the disable/enable toggling to the `dropover` event instead. It _does_ look like `$(this).droppable('disable');` won't ever work in the actual `drop` event. Why would that be? Thanks again for your help! I really appreciate it. – minttoothpick May 03 '12 at 19:03

Making a jQuery UI droppable only accept one draggable at a time

1 Answers1