UI droppable for a project, I would like to detect the opposite to the accepted event.
I mean that if i drag and drop a not accepted container do some action, so far I haven't found any way to detect it.
jQuery UI Droppable not accepted event
857 views Asked by DJ22T At
2
There are 2 answers
1
On
That works great, thanks. Have just followed up on it a bit below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
//The red div becomes draggable
$(".red").draggable({
revert : function(droppableContainer) {
if(droppableContainer) {
//If it's droppable :
alert('valid');
$(this).css("visibility", 'hidden');
}else {
//if it's not droppable :
alert('invalid');
}
return(!droppableContainer) //returns the draggable to its original position
}
});
//The pink div becomes draggable
$(".pink").draggable({
revert : function(droppableContainer) {
if(droppableContainer) {
//If it's droppable :
alert('valid');
$(this).css("visibility", 'hidden');
}else {
//if it's not droppable :
alert('invalid');
}
return(!droppableContainer) //returns the draggable to its original position
}
});
$(".dropdiv").droppable({accept: '.pink',});
});
</script>
</head>
<body>
<div class="ui-widget-content red" style="width: 400px; height: 150px; padding: 0.5em; float: left; border:3px solid red;">
<p>Drag</p>
</div>
<div class="ui-widget-content pink" style="width: 400px; height: 150px; padding: 0.5em; float: left; border:3px solid pink;">
<p>Drag</p>
</div>
<div class="dropdiv ui-widget-header" style="width: 400px; height: 150px; padding: 0.5em; float: left; border:3px solid black;">
<p>Drop here</p>
</div>
</body>
</html>
Found out that using the
revertoption for the draggable event can solve it.