set the header name,one column support only one control,property window

See more:

jQuery

jQuery-UI

hello friends

i have created drag and drop the control but i want while drag the control at the same time the name should placed in header div and data div only accept the only one control. if i click the selected control it will show the property window.please can any one help me. its very urgent.

<script src="jquery-1.5.min.js" type="text/javascript"></script>

    <script src="jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

    <style type="text/css">
        .empty
        {
        }
        .item
        {
            background: gray;
            float: left;
            padding: 5px;
            margin: 5px;
            cursor: move;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            z-index: 5;
        }
        .item_container
        {
            width: 610px;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .icart, .icart label
        {
            cursor: e-resize;
        }
        .divrm
        {
            text-align: left;
        }
        .remove
        {
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
            position: relative;
            top: -7px;
        }
        .remove:hover
        {
            color: #999;
        }
        .clear
        {
            clear: both;
        }
        .divDragDropHeader
        {
            height: 50px;
            width: 100%;
            z-index: 0;
            cursor: e-resize;
            border: solid 1px gray;
        }
        .divDragDropData
        {
            height: 445px;
            width: 100%;
            position: relative;
            padding: 0 0 0 2px;
            z-index: 0;
            cursor: e-resize;
            border-width: 0 1px;
        }
        .back
        {
            background: #e9e9e9;
        }
        .drop-active
        {
            background: #ffff99;
        }
        .drop-hover
        {
            background: #ffff66;
        }
        #navigate
        {
            width: 500;
            margin: 0 auto;
            border: 1px solid gray;
            border-top-width: 0;
            -webkit-border-radius: 0 0 .5em .5em;
            -moz-border-radius: 0 0 .5em .5em;
            border-radius: 0 0 .5em .5em;
            padding: 10px;
            font-size: 14px;
            background: #333;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#aBAddClnBtn").click(function() {
                var new_div = "<div  style='border: solid 1px gray; width: 15%; '><div style='border: solid 1px gray; height: 50px;'>&nbsp;</div> <div  style='border: solid 1px gray; height: 445px;'>&nbsp;</div></div>";
                $(new_div).css("float", "left").appendTo("#divContent");
                return false;
            });
        });

        $(document).ready(function() {
            $(".item").draggable({
                revert: true
            });
            $(".divDragDropData").draggable({
                axis: "x"
            });
            $(".divDragDropData").droppable({
                accept: ".item",
                activeClass: "drop-active",
                hoverClass: "drop-hover",
                drop: function(event, ui) {
                    var item = ui.draggable.html();
                    var itemid = ui.draggable.attr("id");

                    var html = '<div class="icart">';
                    html = html + '<div class="divrm">';
                    html = html + '<a onclick="remove(this)" class="remove ' + itemid + '">&times;</a>';
                    html = html + '<div/>' + item + '</div>';
                    $(".divDragDropData").append(html);
                }
            });
            $("#btn_clear").click(function() {
                $(".divDragDropData").fadeOut("2000", function() {
                    $(this).html("").fadeIn("fast").css({ left: 0 });
                });
                return false;
            });
        });
        function remove(el) {
            $(el).hide();
            $(el).parent().parent().effect("highlight", { color: "#ff0000" }, 1000);
            $(el).parent().parent().fadeOut('1000');
            setTimeout(function() {
                $(el).parent().parent().remove();

            }, 1100);
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%" cellspacing="5">
            <tr>
                <td style="width: 8%; height: 100%; vertical-align: top;">
                    <div id="divFormFields" class="item_container" style="width: 100%; background-color: gray;">
                        <div id="divFieldtitle">
                            Form Fields
                        </div>
                        <div id="divFieldDetails">
                            <div class="item" id="Empid">
                                EmpId
                            </div>
                            <div class="item" id="EmployeeName">
                                EmployeeName</div>
                            <div class="item" id="JobTitle">
                                JobTitle</div>
                            <div class="item" id="Division">
                                Division</div>
                            <div class="item" id="Location">
                                Location</div>
                            <div class="item" id="HireDate">
                                HireDate</div>
                            <div class="item" id="PerformanceResults">
                                PerformanceResults</div>
                            <div class="item" id="PerformanceBehaviour">
                                PerformanceBehaviour</div>
                            <div class="item" id="MeritIncrement">
                                MeritIncrement</div>
                            <div class="item" id="PromoJobTitle">
                                PromoJobTitle</div>
                            <div class="item" id="PromoIncrement">
                                PromoIncrement</div>
                            <%-- <ul>
                                <li class="item" id='EmpId'><span>EmpId</span></li>
                                <li class="item" id='EmployeeName'><span>EmployeeName</span></li>
                                <li class="item" id='JobTitle'><span></span>JobTitle</li>
                                <li class="item" id='Division'><span></span>Division</li>
                                <li class="item" id='Location'><span></span>Location</li>
                                <li class="item" id='HireDate'><span></span>HireDate</li>
                                <li class="item" id='PerformanceResults'><span></span>PerformanceResults</li>
                                <li class="item" id='PerformanceBehaviour'><span></span>PerformanceBehaviour</li>
                                <li class="item" id='MeritIncrement'><span></span>MeritIncrement</li>
                                <li class="item" id='PromoJobTitle'><span></span>PromoJobTitle</li>
                                <li class="item" id='PromoIncrement'><span></span>PromoIncrement</li>
                                <%-- <li id='label'><span>Label</span></li>
                                <li id='input type="text"'><span>TextBox</span></li>
                                <li id='select'><span>DropDownList</span></li>
                                <li id='textarea'><span>Textarea</span></li>
                                <li id='input type="button" value="Add"'><span>Add</span></li>
                                <li id='input type="button" value="Save"'><span>Save</span></li>
                                <li id='input type="button" value="update"'><span>Update</span></li>
                            </ul>--%>
                        </div>
                    </div>
                    <table>
                        <tr>
                            <td>
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>
                                <input type="button" id="aBAddClnBtn" value="Add Column" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="width: 60%; height: 100%; vertical-align: top;">
                    <div id="divContent" class="back" style="border: solid 3px gray; height: 500px; width: 100%;">
                        <div id="divColumn1" style="border: solid 1px gray; width: 15%; height: 100%;">
                            <div class="divDragDropHeader" id="divHeader1">
                            </div>
                            <div class="divDragDropData" id="divData1">
                            </div>
                        </div>
                  <%--      <div id="divColumn2" style="border: solid 1px gray; width: 15%; height: 100%;">
                            <div class="divDragDropHeader" id="divHeader2">
                            </div>
                            <div class="divDragDropData" id="divData2">
                            </div>
                        </div>--%>
                        <div id="navigate">
                            <div id="nav_left">
                                <a href="" id="btn_clear">Clear </a>
                            </div>
                        </div>
                    </div>
                </td>
                <td id="tdPropertyWindow" style="width: 25%; height: 100%; vertical-align: top;">
                    <div id="lYPropertyWindow" style="width: 100%; background-color: Gray;">
                        <table>
                            <tr>
                                <td colspan="2" align="center">
                                    <b>Properties</b>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>ControlType</b>
                                </td>
                                <td>
                                    <select id="lBControlType" name="lBControlType" style="width: 125px;">
                                        <option value='label'>Label</option>
                                        <option value="input type='text'">Textbox</option>
                                        <option value='select'>DropDown</option>
                                        <option value='textarea'>Textarea</option>
                                        <option value='input type="button" value="Save"'>Save Button</option>
                                        <option value='input type="button" value="Add"'>Add Button</option>
                                        <option value='input type="button" value="Update"'>Update Button</option>
                                        <%-- <option value="EmpId">EmpId</option>
                                        <option value="EmployeeName">EmployeeName</option>
                                        <option value="JobTitle">JobTitle</option>
                                        <option value="Division">Division</option>
                                        <option value="Location">Location</option>
                                        <option value="HireDate">HireDate</option>
                                        <option value="PerformanceResults">PerformanceResults</option>
                                        <option value="PerformanceBehaviour">PerformanceBehaviour</option>
                                        <option value="MeritIncrement">MeritIncrement</option>
                                        <option value="Lumpsum">Division</option>
                                        <option value="PromoJobTitle">PromoJobTitle</option>
                                        <option value="PromoIncrement">PromoIncrement</option>--%>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>DisplayName</b>
                                </td>
                                <td>
                                    <input type="text" id="txtDispalyName" name="txtDisplayName" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>TableName</b>
                                </td>
                                <td>
                                    <input type="text" id="txtTableName" name="txtTableName" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Width</b>
                                </td>
                                <td>
                                    <input type="text" id="txtWidth" name="txtWidth" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Height</b>
                                </td>
                                <td>
                                    <input type="text" id="txtHeight" name="txtHeight" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Top</b>
                                </td>
                                <td>
                                    <input type="text" id="txtTop" name="txtTop" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Left</b>
                                </td>
                                <td>
                                    <input type="text" id="txtLeft" name="txtLeft" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>ContainerId</b>
                                </td>
                                <td>
                                    <input type="text" id="txtContainer" name="txtContainer" style="width: 120px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Visibility</b>
                                </td>
                                <td>
                                    <input type="text" id="txtVisible" name="txtVisible" value="True" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>PrimaryKey</b>
                                </td>
                                <td>
                                    <select id="lBPrimaryKey" style="width: 125px;">
                                        <option value="true">True</option>
                                        <option value="false">False</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Used</b>
                                </td>
                                <td>
                                    <select id="lBUsed" style="width: 125px;">
                                        <option value="true">True</option>
                                        <option value="false">False</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Editable</b>
                                </td>
                                <td>
                                    <select id="lBEditable" style="width: 125px;">
                                        <option value="true">True</option>
                                        <option value="false">False</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td colspan='2' align="center">
                                    <b>Events</b>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Action</b>
                                </td>
                                <td>
                                    <input type="text" id="txtAction" name="txtAction" style="width: 120px" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <b>Data Type</b>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Alpha/Num</b>
                                </td>
                                <td>
                                    <input type="text" id="txtAlpha" name="txtAlpha" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>NumberType</b>
                                </td>
                                <td>
                                    <input type="text" id="txtNumberType" name="txtNumberType" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Precision</b>
                                </td>
                                <td>
                                    <input type="text" id="txtPrecision" name="txtPrecision" style="width: 120px;" />
                                </td>
                            </tr>
                            <tr align="center">
                                <td colspan="2">
                                    <input type="button" id="aBSaveBtn" value="Save" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>