CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-drop
user1532257
user1532257

Reputation:

How to make draggable revert if dropped in the wrong place

The draggables in my drag and drop game should only be able to be dropped in the designated area highlighted by the css.

$('.drag').draggable({

helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: 'invalid'
});


$('.drop').droppable ({
drop: function(event, ui) {
    word = $(this).data('word');

   }
});

The CSS style is called .showword, and the click event that triggers it is called "#picknext".

Any ideas how I would get the draggable to revert if it wasn't dropped in the styled area?

Something like this...

$('#picknext').click({
drop: function(event, ui) {
    word = $(this).data('word');
}       

});

Upvotes: 1

Views: 1789

Answers (2)

Chris
Chris

Reputation: 27609

Rather than having a function for your revert property you want to set it to invalid as discussed in that options help: http://docs.jquery.com/UI/Draggable#option-revert

Upvotes: 0

Shouvik
Shouvik

Reputation: 11720

Here is something that should get you started.

http://jqueryui.com/demos/droppable/#revert

Upvotes: 1

Related Questions