Geek asks and answers

Creating jQuery UI droppable allows only one drag and drop

I saw only a couple of options on this issue, asked a couple of other places, in particular here and.

Basically, I have a checker playground where every square on the board is droppable, and every gameplay is draggable. Each square can have only one fragment at a time, and I'm trying to switch the on / off method depending on whether there is a piece on the square or not.

Here is a link to what I still have: http://jsbin.com/ayalaz , and below is the most suitable 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 tips?

Thanks in advance! Jeremiah

+3
source share
1

, droppable drop. , droppable .

, , , CSS :

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

, , droppability . jQuery UI droppable documentation:

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

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

Edit

, $(this).droppable('disable'); $(this).droppable('enable'); jquery-ui .

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

More articles: