https://jsfiddle.net/UdayKumar/rm5ey912/2/
I have copied the working demo.
On dragging the elements from left and dropped on the right side. The div must change its width and height dynamically. On dropping different elements i want to add elements dynamically like radio buttons, checkboxes, textfield etc. Can some one help me with this??
<!doctype html>
<head>
<title>Form Builder</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script src="jQuery.min.js"></script>
<script src="jQuery.ui.js" type="text/javascript"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Title"> <img src="" width="200" height="70" ></div>
<div id="listOfItems">
<div id="Heading" class="block">Heading
<div class="close">X</div>
</div>
<div id="txtbox" class="block">Text Box
<div class="close">X</div>
</div>
<div id="txtfield" class="block">Text Field
<div class="close">X</div>
</div>
<div id="RB1" class="block">Radio Button-1
<div class="close">X</div>
</div>
</div>
<div id="Container" >
</div>
</body>
</html>
$('#Container').sortable({
helper: 'clone'
});
$('.block').draggable({
helper: 'clone',
connectToSortable: '#Container'
});
#Container{
position:absolute;
width:1024px;
height:508px;
left:300px;
top:100px;
overflow: auto;
border:1px solid;
box-shadow:
0 0 0 3px hsl(0, 0%, 50%),
0 0 0 5px hsl(0, 0%, 60%);
}
#Title{
position:absolute;
font-family: sans-serif;
font-size:30px;
width:1024px;
left:150px;
color:Red;
text-align:center;
height:100px;
}
.block{
position:relative;
width:100px;
height:50px;
left:0px;
top:50px;
margin-bottom:2px;
border:1px solid;
}
.block1{
position:relative;
width:200px;
height:50px;
left:0px;
top:50px;
background-color:green;
margin-bottom:2px;
border:1px solid;
}
#Heading{
background-color:red;
}
#listOfItems{
position:absolute;
top:100px;
width:250px;
height:500px;
border:1px solid;
overflow:hidden;
border-style: doubled;
box-shadow:
0 0 0 3px hsl(0, 0%, 50%),
0 0 0 5px hsl(0, 0%, 60%);
}
.close{
position: relative;
height: 15px;
width: 12px;
left: 976px;
border: 1px solid red;
display:none;
}
.block:hover .close{
display:block;
}
So i have managed to make a simpler working model of what you need from the code you provided. The fiddle you provided was not working due to the fact that the jQuery-ui included was not proper.
The logic is that just before dropping we are checking the id of the dropping item and based on that id, the content of dropping element is changed. By adding a new css class to the dropping element, the height and width of droppable can be specified. I have added a few codes as shown
$('#Container').sortable({
helper: 'clone',
receive : function(event,ui){
var block_id = ui.item.attr('id');
var html='<div class="close">X</div>';
if(block_id == 'Heading'){
html+= '<h1>Sample Heading</h1>';
}else if(block_id == 'txtbox'){
html+= '<input type="text" name="txt_name" placeholder="your text here">';
}else if(block_id == 'txtfield'){
html+= '<textarea name="textarea_name" cols="40" rows="6"></textarea>';
}else if(block_id == 'RB1'){
html+= '<input type="radio" name="radio_name" value="option1">Option1<input type="radio" name="radio_name" value="option2">Option2';
}
ui.helper.removeAttr('style').addClass('new_element_class').html(html);
}
});
$('.block').draggable({
helper: 'clone',
connectToSortable: '#Container'
});
$('.close').live("click", function(){
$(this).parent().hide();
});
Here is the working fiddle. fiddle. Check it out