<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>jQuery UI position method</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
style
>
.height {
height: 10px;
}
#parentDivID {
width: 500px;
height: 120px;
padding: 15px;
border: 1px solid black;
background-color: green;
text-align: center;
}
.positionableClass {
position: absolute;
display: block;
border-radius: 25%;
background-color: #e9e9e9;
text-align: center;
}
#positionableId {
width: 80px;
height: 80px;
}
#optionsDivID {
padding: 10px;
margin-top: 20px;
}
.selectDiv {
padding-bottom: 20px;
}
select {
margin-left: 15px;
}
</
style
>
<
script
>
$(function() {
function position() {
$(".positionableClass").position({
my: $("#myHorizontalID").val() +
" " + $("#myVerticalID").val(),
at: $("#atHorizontalID").val()
+ " " + $("#atVerticalID").val(),
of: $("#parentDivID"),
collision: $("#collHorizontalID").val() +
" " + $("#collVerticalID").val()
});
}
$("select").on("click keyup change", position);
$("#parentDivID").draggable({
drag: position
});
position();
});
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
b
>jQuery UI position method </
b
>
<
div
class
=
"height"
> </
div
>
<
div
id
=
"parentDivID"
>
<
p
>
This is the parent target element.
</
p
>
</
div
>
<
div
class
=
"positionableClass"
id
=
"positionableId"
>
<
p
>
Change my position
</
p
>
</
div
>
<
div
id
=
"optionsDivID"
>
<
div
class
=
"selectDiv"
>
<
b
>Select "my" positions :</
b
>
<
select
id
=
"myHorizontalID"
>
<
option
value
=
"left"
>left</
option
>
<
option
value
=
"center"
>center</
option
>
<
option
value
=
"right"
>right</
option
>
</
select
>
<
select
id
=
"myVerticalID"
>
<
option
value
=
"top"
>top</
option
>
<
option
value
=
"center"
>center</
option
>
<
option
value
=
"bottom"
>bottom</
option
>
</
select
>
</
div
>
<
div
class
=
"selectDiv"
>
<
b
>Select "at" positions :</
b
>
<
select
id
=
"atHorizontalID"
>
<
option
value
=
"left"
>left</
option
>
<
option
value
=
"center"
>center</
option
>
<
option
value
=
"right"
>right</
option
>
</
select
>
<
select
id
=
"atVerticalID"
>
<
option
value
=
"top"
>top</
option
>
<
option
value
=
"center"
>center</
option
>
<
option
value
=
"bottom"
>bottom</
option
>
</
select
>
</
div
>
<
div
class
=
"selectDiv"
>
<
b
>Select collision options:</
b
>
<
select
id
=
"collHorizontalID"
>
<
option
value
=
"flip"
>flip</
option
>
<
option
value
=
"fit"
>fit</
option
>
<
option
value
=
"flipfit"
>flipfit</
option
>
<
option
value
=
"none"
>fit none</
option
>
</
select
>
<
select
id
=
"collVerticalID"
>
<
option
value
=
"flip"
>flip</
option
>
<
option
value
=
"fit"
>fit</
option
>
<
option
value
=
"flipfit"
>flipfit</
option
>
<
option
value
=
"none"
>none</
option
>
</
select
>
</
div
>
</
div
>
</
body
>
</
html
>