Jquery UI's droppable() method (also known as a widget in Jquery UI) defines the action when a draggable element is dragged on a specific element (in which droppable() is applied).
accept option of Jquery UI's droppable()
We give the class value of draggable element as a value of accept option. When an HTML element is droppable and we use accept option of it. Then the draggable element having the same class value can be dropped on it.
Example:***
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Droppable() widget</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
*{box-sizing:border-box;}
div{
width:400px;
border:1px solid black;
padding:20px;
float:left;
margin-right:20px;
}
img{margin:20px;}
</style>
</head>
<body>
<div class="logo-icon">
<img src="https://jaischool.com/wp-content/uploads/2019/12/Jaischool.com_-e1575352026662.png" alt="1" width="100" class="logo">
<img src="https://jaischool.com/wp-content/uploads/2019/12/jaischool-icon.png" alt="2" width="100" class="icon">
</div>
<div class="logo-box">
<h2>Drop Jaischool's <font color="red">LOGO</font> here</h2><hr>
</div>
<div class="icon-box">
<h2>Drop Jaischool's <font color="red">ICON</font> here</h2><hr>
</div>
<script>
$(document).ready(function(){
$("img").draggable({
helper:"clone",
revert:"invalid",
});
$(".logo-box").droppable({
accept:".logo",
drop:function(event,ui){
$(".logo-box").append(ui.draggable);
},
});
$(".icon-box").droppable({
accept:".icon",
drop:function(event,ui){
$(this).append(ui.draggable);
},
});
});
</script>
</body>
</html>drop Event
The time when draggable-element is dropped on droppable-element Then the anonymous function of drop event executes. It has two parameters event and ui.
Publish A Comment