Hi,
I have to create a form by drag and drop the controls like in Visual studio. and set the properties.
I have done a sample but not fulfilled.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
function getControl(control) {
if (control != '') {
if (control == 'Button')
control = '<button id="btnSave" value="">Default</button>'
else if (control == 'TextInput')
control = '<input type="text" name="FirstName" value="">'
else
control = '<label id="label">Suman</label>'
}
return control;
}
$(function () {
var ControlType = ''
$('#divControls li').on('mouseover', function () {
var name = $(this).html();
ControlType = getControl(name);
$("#divControls li").draggable({
appendTo: "body",
helper: "clone"
});
$("#DivComponet").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").html(ControlType).appendTo(this);
}
}).sortable({
sort: function () {
placeholder: 'placeholder'
$(this).removeClass("ui-state-default");
}
});
});
});
</script>
</head>
<body>
<div style="width: 800px; height: 400px;">
<div id="divControls" style="width: 300px; float: left; height: 390px;">
<ul>
<li>Label</li>
<li>Button</li>
<li>TextInput</li>
</ul>
</div>
<div id="DivComponet" class="ui-widget-content" style="width: 300px; float: left;
height: 390px; margin-left: 10px;">
<ol>
<li class="placeholder">Add your controls here</li>
</ol>
</div>
</div>
</body>
</html>
In this i need to set the Properties to controls and save the form.
please help me...