There are some built-in options for this, on your .draggable()
, set the revert
option to 'invalid'
, and it’ll go back if it wasn’t successfully dropped onto a droppable, like this:
$("#draggable").draggable({ revert: 'invalid' });
Then in your .droppable()
set what’s valid for a drop using the accept
option, for example:
$("#droppable").droppable({ accept: '#draggable' });
Anything not matching this selector gets reset when you let go, you can see a full demo here. The accept option also takes a function if you need filtering a selector can’t provide, like this:
$("#droppable").droppable({
accept: function(dropElem) {
//dropElem was the dropped element, return true or false to accept/refuse it
}
});