<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
type
=
"text/css"
>
.square_draggable {
width: 50px;
height: 50px;
border: 1px solid black;
margin: 5px;
text-align: center;
line-height: 50px;
background-color: lightblue;
cursor: pointer;
border-radius: 10px;
}
.square_droppable {
width: 100px;
height: 100px;
border: 1px dotted gray;
margin: 5px;
text-align: center;
line-height: 100px;
background-color: lightgray;
}
.container {
background-color: darkgreen;
width: 500px;
height:300px;
margin: auto;
}
</
style
>
</
head
>
<
body
>
<
div
data-role
=
"page"
id
=
"gfgpage"
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
div
data-role
=
"main"
class
=
"ui-content"
>
<
h3
>jQuery UI Droppable scope option</
h3
>
<
div
id
=
"gfg_container"
class
=
"container"
>
<
div
id
=
"dragFirst"
class
=
"square_draggable"
>
Item 1</
div
>
<
div
style
=
"float:left"
>
<
div
id
=
"dragSecond"
class
=
"square_draggable"
>
Item 2</
div
>
</
div
>
<
div
style
=
"float:left;margin-left:50px;"
>
<
div
id
=
"dropFirst"
class
=
"square_droppable"
>
Scope : first</
div
>
</
div
>
<
div
style
=
"float:left;margin-left:50px;"
>
<
div
id
=
"dropSecond"
class
=
"square_droppable"
>
Scope : second</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(function() {
$("#dragFirst").draggable({
scope: "first",
containment: "#gfg_container"
});
$("#dragSecond").draggable({
scope: "second",
containment: "#gfg_container"
});
$("#dropFirst").droppable({
scope: "first",
drop: function(event, ui) {
$(this).css("background-color", "lightgreen")
},
over: function(event, ui) {
$(this).css("background-color", "green")
},
out: function(event, ui) {
$(this).css("background-color", "lightgray")
}
});
$("#dropSecond").droppable({
scope: "second",
drop: function(event, ui) {
$(this).css("background-color", "lightgreen")
},
over: function(event, ui) {
$(this).css("background-color", "green")
},
out: function(event, ui) {
$(this).css("background-color", "lightgray")
}
});
});
</
script
>
</
body
>
</
html
>