Code examples
Bind to the layout event of jqxDockPanel.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <style type="text/css"> .row {
padding: 1px;
}
.draggable {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.events {
float: right;
padding: 10px;
font-family: Tahoma;
font-size: 13px;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
</style> <script type="text/javascript"> JQXElements.settings[
"dragdropSettings"] =
{
dropTarget:
'.drop-target',
restricter:
'parent' }
</script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent
</div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target
</div></div> </div> <div id="events" class="events">
