<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqx-all.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdragdrop.js"
>
</
script
>
</
head
>
<
body
class
=
'default'
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxDragDrop dropTarget Property
</
h3
>
<
div
style="width: 120px; height: 120px;
border: 1px solid black;
background-color: green;"
id
=
"dragID"
>
<
div
style="display: flex;
justify-content: center;
align-items: center;
height: 100%;">
Drag me
</
div
>
</
div
>
<
div
style="width: 150px; height: 150px;
background: blue; margin-top: 50px;
border: 1px solid black;"
id
=
"dropID"
class
=
"dropTarget"
>
<
div
style="display: flex;
justify-content: center;
align-items: center;
height: 100%;">
Drop here
</
div
>
</
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
$("#dragID").jqxDragDrop({
feedback: 'clone',
tolerance: 'fit',
dropTarget: "#dropID"
});
$('#dragID').on('dropTargetEnter', function (event) {
$("#dropID").css({background: "green"});
});
$('#dragID').on('dropTargetLeave', function (event) {
$("#dropID").css({background: "red"});
});
});
</
script
>
</
body
>
</
html
>